uniapp、微信小程序封装上传图片的方法

在我们开发小程序的时候，不能避免要使用到小程序上传图片的API  chooseImage 、uploadFile 方法

首先再我们程序文件utils 中 创建一个upImages.js 文件，废话也不不多说  直接上代码：

选择图片方法的封装：

chooseImage(size){
    return new Promise((resolve,reject) => {
      uni.chooseImage({
        count: size, // 默认9
        sizeType: ['original', 'compressed'],
        sourceType: ['album','camera'],//['album','camera'],
		mediaType: ['image'],//['image', 'video'],
        success: function (res) {
          const tempFiles = res.tempFiles  //包含图片大小的数组
          let answer = tempFiles.every(item => {   //限制上传图片大小为
            return item.size <= 2*1024*1024
          })
          if (!answer) {
            toast('上传图片不能大于2M!')
            return
          }
          resolve(res)
        },
        fail:function(err){
          hideLoading()
          reject("选择文件失败",err)
        }
      })
    })
  },

count ：默认9张图片

sizeType： ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

sourceType：['album','camera'], // 可以指定来源是相册还是相机，默认二者都有

mediaType：['image', 'video'], // 可以指定是图片视频，默认二者都有

上传图片方法的封装：

uploadFile(file){
    return new Promise((resolve, reject) => {
      uni.uploadFile({
        header: {
			'zrjkAppcode': getApp().globalData.zrjkAppCode
		},
		url: `${getApp().globalData.baseUrl}/api/multiUpload`,
		filePath: file,
		name: 'file',
		formData: {
			'token': storage.get('userInfo').token
		},
		success: function (res) {
			var data = res.data;
			resolve(JSON.parse(data))
		},
		fail: function (err) {
			hideLoading()
		    reject(err)
		},
      })
    })
  },

header 中的信息是根据自己需要来设置，也可以选默认的

getApp().globalData.baseUrl  是你上传图片的请求路劲

formData 可传可不传  我这里传的是token  根据后台程序员决定的

最后就是我需要再功能处调用的方法封装：

async uploadPic(size=1){
    let chooseImageResult = await this.chooseImage(size)
    let imgArr = await chooseImageResult.tempFilePaths.map(async (item) => {
      let uploadFileResult = await this.uploadFile(item)
      return uploadFileResult.data;
    })
    return new Promise((resolve,reject) => {
      Promise.all(imgArr).then((result)=>{
        toast('上传成功')
        resolve(result)
      }).catch(err => {
        hideLoading()
        reject(err)
      })
    }) 
  },

size  是我们需要上传图片的张数  最大为9张

最后就是我们再页面中的使用： 首先要引入我们的js文件

import { upLoad } from '../../utils/upImages.js'   根据你文件路径自己修改

完整的代码：

import { toast, hideLoading } from "./util.js"
import storage from './storage.js'
export const upLoad = {
  // 上传图片 返回一个图片的数组
  async uploadPic(size = 1){
    let chooseImageResult = await this.chooseImage(size)
    let imgArr = await chooseImageResult.tempFilePaths.map(async (item) => {
      let uploadFileResult = await this.uploadFile(item)
      return uploadFileResult.data;
    })
    return new Promise((resolve,reject) => {
      Promise.all(imgArr).then((result)=>{
        toast('上传成功')
        resolve(result)
      }).catch(err => {
        hideLoading()
        reject(err)
      })
    }) 
  },
  uploadFile(file){
    return new Promise((resolve, reject) => {
      uni.uploadFile({
        header: {
					'zrjkAppcode': getApp().globalData.zrjkAppCode
				},
				url: `${getApp().globalData.baseUrl}/api/multiUpload`,
				filePath: file,
				name: 'file',
				formData: {
					'token': storage.get('userInfo').token
				},
				success: function (res) {
					var data = res.data;
					resolve(JSON.parse(data))
				},
				fail: function (err) {
					hideLoading()
					reject(err)
				},
      })
    })
  },
  chooseImage(size){
    return new Promise((resolve,reject) => {
      uni.chooseImage({
        count: size, // 默认9
        sizeType: ['original', 'compressed'],//['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album','camera'],//['album','camera'], // 可以指定来源是相册还是相机，默认二者都有
				mediaType: ['image'],//['image', 'video'], // 可以指定是图片视频，默认二者都有
        success: function (res) {
          const tempFiles = res.tempFiles //包含图片大小的数组
          let answer = tempFiles.every(item => {   //限制上传图片大小为,
            return item.size <= 2*1024*1024
          })
          if (!answer) {
            toast('上传图片不能大于2M!')
            return
          }
          resolve(res)
        },
        fail:function(err){
          hideLoading()
          reject("选择文件失败",err)
        }
      })
    })
  },
}

toast： 这是封装的 uni.showToast

hideLoading ： 这是封装的 uni.hideLoading

showLoading:   这是封装的uni.showLoading

微信小程序的上传图片方法基本一样，如有需要，自行修改一下

在最后，如有小伙伴想学习了解更多前端知识，可以关注我的公众号  codefuzi  一起成长