当前位置： 移动技术网 > IT编程>脚本编程>vue.js > uniapp APP用户修改头像(上传到OSS)

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

2020年07月17日  | 移动技术网IT编程  | 我要评论

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) {
		// 模拟之前的 callback
		successc && 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的失效时间
}

本文地址：https://blog.csdn.net/weixin_45435854/article/details/107383051

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网