uniapp修改头像

以下将是 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,这样一进来就是你换过的头像了

好了,不知道有没有帮到您,仅供参考!

你可能感兴趣的:(app)