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

图片上传

      • 封装完最终效果图
      • 实现步骤,新建uploadimg.js
      • 全局方法挂载,在main.js中注册

封装完最终效果图

  • 两行代码拿到图片
//上传图片
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

你可能感兴趣的:(小程序,javascript,开发语言,ecmascript)