uniapp里面对用户上传头像和上传照片的事件封装

封装事件详情

在api文件中创建一个js文件封装事件

// 图片上传接口
function uploadFiles(event, figh,cd) {
	return new Promise((resolve, reject) => {
		for (var i = 0; i < event.tempFilePaths.length; i++) {
			uni.compressImage({
				src: event.tempFilePaths[i],
				quality: 20,
				compressedWidth: 350,
				compressHeight: 350,
				success: res => {
					uni.uploadFile({
						url: '地址+接口',
						filePath: res.tempFilePath,
						name: 'file',
						header: { //（根据自身接口要求选择）
							token: figh == true ? uni.getStorageSync('user_infoy').token : '',
						},
						success: res => {
							const imgRes = JSON.parse(res.data)
							cd.push({
								url:imgRes.data.fullurl
							})
							resolve(cd)
						},
						fail: () => {
							reject('网络错误');
						}
					});
				}
			})
		}
	})
}
// 小程序用户头像上传接口
function headportraits(event,figh){
	return new Promise((resolve, reject) => {
			uni.compressImage({
				src: event.tempFilePaths[0],
				quality: 20,
				compressedWidth: 350,
				compressHeight: 350,
				success: res => {
					uni.uploadFile({
						url: '地址+接口',
						filePath: res.tempFilePath,
						name: 'file',
						success: res => {
							const imgRes = JSON.parse(res.data)
							resolve(imgRes)
						},
						fail: () => {
							reject('网络错误');
						}
					});
				}
			})
	})
}

module.exports = {
	uploadImg: uploadFiles,
	headportrait:headportraits,
}

封装的事件注册与挂载

在main.js入口文件中引入,挂在到vue原型链上，这里是全局引入这个事件

封装事件的调用

其他地方直接调用用户头像封装的方法

调用封装图片上传的方法

小结

同一个方法，在不同页面都会用到，比如登录页的用户头像上传，个人信息页面用户头像需要修改，也要用到用户头像上传修改等，
好处：
1.提高代码复用性
2.方便调试
3.简化代码逻辑