uniapp APP用户修改头像(上传到OSS)

点击头像进行修改头像

点击头像跳转到新的页面（先判断用户是否登陆），选择图片，确认上传。


<image class="portrait" :src="headimg ||imagUrl('../../../static/missing-face.png')" @click="navtophoto()"></image>

此页面结构如图（kps-image-cutter为剪切图片插件）：

选择图片:

 chooseImage() {uni.chooseImage({success: res => {// 设置url的值，显示控件this.url = res.tempFilePaths[0];}});},

确认上传： 1将图片资源存到云服务器，返回图片链接。 2同时向后端发请求修改用户的图片链接。that.path为需要上传的图片路径，

 sureImage(){var that=this;util.fn_upload(0,0,[that.path],function successc(e) {//上传成功的回调，向后端发请求修改用户的图片链接。var data = {mid: that.mid,headimg: JSON.parse(e.data).url};var path = 'member.headimage/set';var method = 'get';//自己封装的uniapp request请求方法util.fn_request(path, data, method, callback);function callback(res) {console.log(res.data.info);uni.hideLoading();if (res.data.info) {uni.showToast({title: '头像修改成功',icon: 'none'});}}},function failc(e) {uni.hideLoading();uni.showToast({title: '网络出了小差',icon: 'none'});});
}

在公用方法util中添加方法：import config, { ossConfig } from './config';
import uploadOSSFile from './libs/ossutil/uploadFile.js';
function fn_upload(useless1, useless2, tempFilePaths, successc, failc) {// useless1 和 useless2 是模拟之前的函数接口var filePath = tempFilePaths[0];var dir = randomString(40) + '/';var url = ossConfig.uploadUrl;return uploadOSSFile(filePath, dir, url, function(url) {// 模拟之前的 callbacksuccessc && successc({data: JSON.stringify({url: url})})}, function(error) {console.error(error);failc && failc(error);});
}function randomString(len = 10) {var result           = '';var characters       = 'abcdefghijklmnopqrstuvwxyz0123456789';var charactersLength = characters.length;for ( var i = 0; i < len; i++ ) {result += characters.charAt(Math.floor(Math.random() * charactersLength));}return result;
}
export default {
fn_upload，
randomString
}

uploadOSSFile。为工具文件uploadOSSFile.js。
可在此下载：**https://gitee.com/zhang123xx/uploadOSSFile.git**

在config公用文件中配置：


export const ossConfig = {// 你的阿里云地址最后面跟上一个/   在你当前小程序的后台的uploadFile 合法域名也要配上这个域名// uploadImageUrl: ".....................",uploadUrl: "...................",uploadSecureUrl: ".......................",AccessKeySecret: '.....................', // AccessKeySecret 去你的阿里云上控制台上找OSSAccessKeyId: '...................', // AccessKeyId 去你的阿里云上控制台上找timeout: 87600 //这个是上传文件时Policy的失效时间
}

uniapp APP用户修改头像(上传到OSS)相关推荐

Uni-app 微信小程序头像上传
uni-app 提供了很多图片处理的Api,比如 uni.chooseImage()方法,但基本都是本地.拍照上传,本地临时.持久存储,要想跟服务端交互,就需要使用上传Api uni.uploadFi ...
修改头像上传至七牛云Java实现
目录
Java实现用户头像上传（修改默认文件大小限制）
概述每次说起文件上传,就不得不提一下前端的实现方式,说来也奇怪,本博主最热门的博客居然也是文件上传,3万多的访问量占了总访问量的一多半:<传统form表单提交方式的文件上传与文件存储>, ...
SpringBoot + Vue 前后端分离（用户信息更新头像上传Markdown图片上传）
文章目录前言用户信息更新前端发送后端接口修改用户头像前端前端图片显示图片上传完整代码后端代码图片存储图片上传工具类图片工具类的配置工具类实现效果 Markdown 图片 ...
PHP+ajaxfileupload 实现用户头像上传
今天写项目的时候需要一个让登录的用户上传头像的功能,然后上网搜了一下,发现有一个不错的Ajax插件ajaxfileupload,所以就拿来用,感觉效果不错,在这里和大家分享一下.下面将用PHP+aja ...
利用formajax头像上传及修改
0. 如果您对数据传输过程中的编码格式,不是很清楚,这边来前后端数据传输编码格式https://blog.csdn.net/qq_52385631/article/details/122821865 ...
用户头像上传之 jQuery+ajax+php+预处理
小知识: dataType:预期的服务器返回的数据类型当设置了dataType:"json"时,后端返回了json,就自动将JSON格式字符串转换为js对象,如果后端返回了Str ...
uniapp头像上传功能
问题:第一次做头像上传,使用普通的uni.request方法请求接口会报跨域解决:实际上uni-app官方有头像上传的API,我也翻看了很多博主的文章,最后自己按照人家的思路敲出来了,方法如下: ...
uni-app的头像上传
page.json配置路由 "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/page ...

uniapp APP用户修改头像(上传到OSS)

uniapp APP用户修改头像(上传到OSS)

uniapp APP用户修改头像(上传到OSS)相关推荐

最新文章

热门文章