van-uploader 单图片上传于多图片批量上传的处理总结与坑点

创建一个通用图片上传处理函数JS文件 ，如下图

import axios from 'axios'
import { Toast } from 'vant';

function upLoaderImg (uploadUrl,file) {
    let chooseImg = []  //选择的图片数组
    let params = new FormData()
    if(Array.isArray(file)){ //因为该组件单选是对象obj，多选是数组array，所以处理的时候要注意特殊性
        chooseImg = file
    }else{
        chooseImg.push(file)
    }
    chooseImg.map((item)=>{
        params.append('file', item.file)
    })    
    params.append('action', 'upload')
    let config = {
    headers: { //添加请求头
        'Content-Type': 'multipart/form-data'
      }
    }
    return new Promise((resolve, reject) => {
        axios.post(uploadUrl, params, config).then(res => {
            if (res && res.data.status == 0) {    
                Toast.loading({
                    message: '图片上传中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                    onClose: resolve(res.data)
                  });
            } else {
                Toast.fail({
                    message: '图片上传异常',
                    forbidClick: true,
                    onClose: reject(res.data)
                  });
            }
        }).catch(err => {
            Toast.fail({
                message: '服务器异常',
                forbidClick: true,
                onClose: reject(err)
            });
        });
    })
}

export {
    upLoaderImg
}

导入到需要图片上传的vue文件内

import * as upImgFun from '@/libs/util.upLoaderImg.js'

van-uploader单图片上传和van-uploader多图片批量上传

这里的方式尽可能的采用了vant官方的event和prop，以及样式

<van-uploader
    v-model="chooseImgCover"
    :after-read="afterRead"
    :max-count="1"
    upload-text="上传图片"
    @delete="coverDelete"
    />

<van-uploader
    v-model="chooseImgInfo"
    :after-read="afterRead"
    @delete="infoDelete"
    :max-count="5"
    upload-text="上传图片"
    multiple
    />

//单图片上传
    async afterReadImg(file) {
      let upUrl = this.webapi("upAppImgs@actionImgData")
      let resImgData = await upImgFun.upLoaderImg(upUrl,file)
      if (status == 0) {
        this.chooseImgCover = []
        let that = this
        setTimeout(function(){
          that.$q.notify({
            message: '图片上传成功',
            position:'top',
            color: 'positive',
            timeout: 1000,
          })
        },1500)

      }
      this.chooseImgCover.push(this.imgFormatJson(resImgData.actionData))
      this.goodsDataForm.goo_picture = resImgData.actionData.attachment
    },
    //多图片上传
    async afterReadImgs(file) {
      let upUrl = this.webapi("upAppImgs@actionImgData")
      let that = this
      // 注意这里这个数据通过异步返回的数据区域无法使用this这个关键词，需要转换一下
      if(file.length > 1){
        file.forEach(async function(item){
          let resImgsData = await upImgFun.upLoaderImg(upUrl,item)
          that.delImgFormat(that.chooseImgInfo)
          //console.log(resImgsData)
          that.chooseImgInfo.push(that.imgFormatJson(resImgsData.actionData))
          that.goodsDataForm.goo_pic.push(resImgsData.actionData.attachment)
        })
      }else{
        let resImgData = await upImgFun.upLoaderImg(upUrl,file)
        that.delImgFormat(that.chooseImgInfo)

        that.chooseImgInfo.push(that.imgFormatJson(resImgData.actionData))
        that.goodsDataForm.goo_pic.push(resImgData.actionData.attachment)
      }

      if (status == 0) {
        setTimeout(function(){
          that.$q.notify({
            message: '图片上传成功',
            position:'top',
            color: 'positive',
            timeout: 1000,
          })
        },1500)
      }
      console.log(that.chooseImgInfo)
    },
    //删除单图片
    coverDelete(file) {
      this.goodsDataForm.goo_picture = []
    },
    //删除多图片
    infoDelete(file) {
      for(let key  in this.goodsDataForm.goo_pic){
        if(this.goodsDataForm.goo_pic.includes(file.attachment)){
          this.goodsDataForm.goo_pic.splice(this.goodsDataForm.goo_pic.indexOf(file.attachment),1);
        }

      }
    },
    //图片上传后显示格式转换
    imgFormatJson(imgData) {
      let imgFormat = {
        attachment: imgData.attachment,
        ext: imgData.ext,
        filename: imgData.filename,
        filesize: imgData.filesize,
        group_id: imgData.group_id,
        height: imgData.height,
        name: imgData.name,
        width: imgData.width,
        url: imgData.url,
        isImage: true
      }
      return imgFormat
    },
    //后端返回来图片显示格式转换
    imgFormatData(backimgData,attachUrl) {
      let formatImgs = []
      if(Array.isArray(backimgData)){ //因为该组件单选是对象，多选是数组
         formatImgs = backimgData.map(function (item,index) { 
            return {
              attachment: attachUrl + item,
              ext: "",
              filename: "",
              filesize: "",
              group_id: "",
              height: "",
              name: "",
              width: "",
              url: attachUrl + item,
              isImage: true
            }
        }) 
      }else{
        let formatImg = {
          attachment: attachUrl + backimgData,
          ext: "",
          filename: "",
          filesize: "",
          group_id: "",
          height: "",
          name: "",
          width: "",
          url: attachUrl + backimgData,
          isImage: true
        }
        formatImgs.push(formatImg)
      }
      return formatImgs
    },
    //图片上传完成后清除不符合标准的值
    delImgFormat(imgData) {
      for(let [key, value] of imgData.entries()){
        if(value.file){
          imgData.splice(key, 1)
        }

      }
    },