uniapp修改头像

短命女 2023-02-17 05:24 32阅读 0赞

以下将是 uniapp 借用七牛云修改头像的代码，但是其他也可借鉴，原理相同，局部更改即可。  
以下代码用到的地址皆为七牛云的地址，上传图片很方便，会给你返回图片地址，个人用户注册账号后建立一个存储空间，可免费使用30天，后期换成公司的就好了。

**注： 七牛云空间地址必须是公开，否则无法显示**

（1）html，一个默认图片和一个修改后的图片

（2）js

data() {
    	return {
    		imgToken: '',	// 本地图片上传到七牛云会返回一个图片路径，需要传图片 token
    		avar: '',	// 修改后的图片路径
    		avarShow: false,	// true 时显示修改后的图片
    		userId: ''	// 用户 id，看接口需求
    	}
    },
    methods： {
    	// 修改头像
    	updateAvar(way) {
    		const {imgToken,userId} = this
    		uni.chooseImage({
    			count: 1,	// 头像只上传1张
    			sourceType: [way],	// way是点击时传入的打开方式相机或相册
    			success: async (chooseImageRes) => {
    				//获取头像token的接口
    				const data = await this.$api.api.user.getImgToken();
    				
    				const tempFilePaths = chooseImageRes.tempFilePaths;
    				uni.uploadFile({
    					url: 'https://upload-z2.qiniup.com/',	// 上传地址（七牛云）
    					filePath: tempFilePaths[0],
    					name: 'file',
    					formData: {
    						token: data.data.body, //头像token，参考返回数据
    						key: chooseImageRes.tempFiles[0].name // 图片名，移动端可能不存在name，可修改为 key: new Date().getTime()+".png" 随机
    					},
    					success: (uploadFileRes) => {
    						// console.log(uploadFileRes);是一个字符串
    						const data = JSON.parse(uploadFileRes.data)
    						// 上传头像接口（参数根据自己的来）
    						this.$api.api.user.updateHead({
    							"creator": this.$store.state.loginName,	//上传者
    							"headPath": "http://qapxsiqga.bkt.clouddn.com/"+data.key,	// 图片最终的路径，http://qapxsiqga.bkt.clouddn.com/是七牛云空间地址
    							"userId": userId
    						}).then(res=>{
    							console.log(res)
    							this.avar = "http://qapxsiqga.bkt.clouddn.com/"+data.key	// 存入修改后的头像
    							this.avarShow = true	// 显示修改后的头像
    						})
    					}
    				});
    			}
    		})
    	}
    }

最后记得获取用户信息，将获取到的头像赋值给 avar，这样一进来就是你换过的头像了，但我们大多数情况都需要**限制图片大小和格式**，其实很简单，在 uni.chooseImage 的成功函数 success 中添加如下代码：

//此处只适配了 app 和小程序，h5 返回的 tempFiles 不一样
    // #ifndef H5
    	const tempFiles = chooseImageRes.tempFiles;
    	for(var i=0;i<tempFiles.length;i++) { 
    		var size = tempFiles[i].size;
    		var path = tempFiles[i].path;
    		var formatImage = path.split(".")[(path.split(".")).length - 1];
    		console.log("图片格式" + formatImage)
    		if (formatImage != "png" && formatImage != "jpg" && formatImage != "jpeg") { 
    			return this.$u.toast('只能上传.png、.jpg、.jpep 格式')
    		}
    		if (config.IMG_SIZE < size) { 
    			return this.$u.toast('图片大小限制：' + (config.IMG_SIZE / 1000 / 1024) + "MB")
    		}
    	}
    // #endif

好了，不知道有没有帮到您，仅供参考！