【图片上传】全局图片上传方法封装~

封装完最终效果图

• 两行代码拿到图片

//上传图片
async chooseimg() {
	let data = await this.$upimg.Upimgload()
	this.imglist = this.imglist.concat(data).slice(0,9)
},
//删除图片
deletePic(index) {
	this.imglist.splice(index, 1)
},

实现步骤，新建uploadimg.js

• uploadurl ，是后台接口图片上传的地址，这个设置成全局变量也不能直接this引用，故还是直接导入地址即可
• Token，不同项目看token存放的地址，一般可以先存缓存，从缓存里面取值
• n=9，默认9张，可以通过传不同的参数，限制张数

// 方法
// 方法
import {
	baseUrl,
} from '@/common/config.js'
export default {
	Upimgload(n = 9) {
		let fileIndex = 0;
		let successList = []
		return new Promise((resolve, reject) => {
			uni.chooseImage({
				count: n, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					console.log(baseUrl);
					uni.showLoading({
						title: "上传中"
					})
					res.tempFilePaths.forEach(item => {
						uni.uploadFile({ // 直接上传文件到云储存
							url: baseUrl + '/api/common/upload', //仅为示例，非真实的接口地址
							filePath: item, // 要上传文件的对象
							name: 'file',
							header: {
								'Token': uni.getStorageSync('token') || ''
							},
							formData: {},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								fileIndex += 1
								successList.push(data.data)
								console.log(successList)
								if (res.tempFilePaths.length == fileIndex) {
									console.log(1111)
									fileIndex = 0
									uni.hideLoading()
									resolve(successList)
									return
								}
							},
							fail(err) {
								console.log(err)
							}
						});
					})
				}
			})
		})
	}
}

全局方法挂载，在main.js中注册

• up 这个名字随便起，只负责接收
• $upimg，这个名字也随便起，但其他页面使用的时候要和这个保持一致

//图片上传
import up from "@/api/uploadimg.js"
Vue.prototype.$upimg = up