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

封装完最终效果图

• 两行代码拿到图片

//上传图片
async chooseimg() {
    
    
	let data = await this.$upimg.Upimgload(1)
	this.form.fullurl = data.fullurl
},

实现步骤，新建uploadimg.js

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

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

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

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

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