vue+vant 利用FormData上传图片（单张or多张）第一版

介绍：
流程：input选取file=>append到FormData中=>提交后台。
利用FormData上传，这个流程无论换什么ui框架，或者自己写都走得通，亲测有效。（自己手写的上传就不拿出来分享了，主要是太乱，自己都看半天）
效果：


代码如下：

//html
<!-- 上传资料 start -->
 <p class="fw fz16 tl ml15 lh40">上传资料</p>
 <van-cell-group title="申请评估表" class="ml15 pt5 borderBottom0" @click="current = 0">
   <div class="fz12 colore5">{{applyDetail.applicateEvaluRemarks}}</div>
   <van-uploader
     v-model="applicationFileList"
     multiple
     :disabled='active==0'
     :max-count="4"
     :after-read="afterRead" 
   />
 </van-cell-group>
 <van-cell-group title="冷链保存知情同意书" class="ml15 pt5 borderBottom0" @click="current = 1">
   <div class="fz12 colore5">{{applyDetail.coldChainInformedRemarks}}</div>
   <van-uploader
     v-model="coldChainFileList"
     multiple
     :disabled='active==0'
     :max-count="4"
     :after-read="afterRead" 
   />
 </van-cell-group>
 <van-cell-group title="患者知情同意书" class="ml15 pt5 borderBottom0" @click="current = 2">
   <div class="fz12 colore5">{{applyDetail.patientInformedRemarks}}</div>
   <van-uploader
     v-model="patientFileList"
     multiple
     :disabled='active==0'
     :max-count="4"
     :after-read="afterRead" 
   />
 </van-cell-group>
 <van-cell-group title="身份证原件（正反面）" class="ml15 pt5 borderBottom0" @click="current = 3">
   <div class="fz12 colore5">{{applyDetail.cardIdRemarks}}</div>
   <van-uploader
     v-model="cardFileList"
     multiple
     :disabled='active==0'
     :max-count="4"
     :after-read="afterRead" 
   />
 </van-cell-group>
 <van-cell-group title="处方笺" class="ml15 pt5 borderBottom0" @click="current = 4">
   <div class="fz12 colore5">{{applyDetail.prescriptionRemarks}}</div>
   <van-uploader
     v-model="prescriptionFileList"
     multiple
     :disabled='active==0'
     :max-count="4"
     :after-read="afterRead" 
   />
 </van-cell-group>
 <van-cell-group title="购药发票" class="ml15 pt5 borderBottom0" @click="current = 5">
   <div class="fz12 colore5">{{applyDetail.invoiceRemarks}}</div>
   <van-uploader
     v-model="invoiceFileList"
     multiple
     :disabled='active==0'
     :max-count="4"
     :after-read="afterRead" 
   />
 </van-cell-group>
 <!-- 上传资料 end -->
 
 <van-button type="primary" class="submits" @click="applyDrug" v-else>提交</van-button>

//js
data() {
    return {
	  applicationFileList: [],//申请评估表
      coldChainFileList: [],//冷链
      patientFileList:[],//患者
      cardFileList:[],//身份证
      prescriptionFileList:[],//处方
      invoiceFileList:[],//发票
      current:0,
	}
}
//methods方法
afterRead(file) { //上传
  let that = this;
  let current = this.current //当前上传
  let deviceFile = []  //选择的图片数组
  let formData = new FormData();
  if(Array.isArray(file)){ //因为该组件单选是对象，多选是数组
    deviceFile = file
  }else{
    deviceFile.push(file)
  }
  deviceFile.map((item)=>{
//files是后台参数name字段对应值
    formData.append('files', item.file ,item.file.name);
  })	
  console.log('选择值',file)
  console.log('formData值',formData.getAll('files'))
  //应为我有六个上传，封装为一个方法，赋值给对应的就好了
  let currentData = ['applicationFileList','coldChainFileList','patientFileList','cardFileList','prescriptionFileList','invoiceFileList']
  
  axios.post(this.$my.api+'/upload/upload',formData,{headers:{'Content-Type':'multipart/form-data'}})
    .then(res => {
      console.log('选择前',that[currentData[current]]);
      //后台返回值 例如：231342.png,234.png以逗号分隔
      res.data.split(',').map((item)=>{
      //赋值给data对应的字段 current = 当前操作；组件格式默认且必须是[{content:xxx}]
      //content原本是base64，用来显示，其实我们没用，我用的时候后台返回的url显示
      //filter用来过滤默认选择的文件，组件会默认多追加一个[{content:xxx,file:xxx}]
        that[currentData[current]].push({content:that.$my.img+item,invoiceUrl:that.$my.img+item});
        that[currentData[current]]=that[currentData[current]].filter((item)=>!('file' in item))//选择没有file的
      })
      console.log('选择后',that[currentData[current]] ,res.data,{content:that.$my.img+res.data})
      formData.delete('files');
    }, err => {
       Toast('上传失败，图片是否过大?')
    })
},
applyDrug(){
     let that = this
     let getVal = (arr)=>{
       let newArr = []
       arr.map((item)=>{
       newArr.push(item.content) 
       })
       return newArr.join(',')
       
     }
     let data ={
       applicateEvaluUrl:getVal(this.applicationFileList),
       coldChainInformedUrl:getVal(this.coldChainFileList),
       patientInformedUrl:getVal(this.patientFileList),
       cardIdUrl:getVal(this.cardFileList),
       prescriptionUrl:getVal(this.prescriptionFileList),
       invoiceUrl:getVal(this.invoiceFileList),
       invoiceList:this.invoiceFileList,
     }
     
     let rule ={
       applicateEvaluUrl:'申请评估表',
       coldChainInformedUrl:'冷链保存同书',
       patientInformedUrl:'患者知情同意书',
       cardIdUrl:'身份证原件',
       prescriptionUrl:'处方笺',
       invoiceUrl:'购药发票'
       }
     if(Object.keys(data).find(item=>data[item] == '')){
       Toast(rule[Object.keys(data).find(item=>data[item] == '')]+'不能为空')
       return false
     }
     axios.post(this.$my.api+'/wet/due/addGiveVisit',{...data})
       .then(res => {
         if(res.data.code == 200){
           Toast(res.data.message) 
           if(that.detailId){ //编辑
             that.$router.go(-1)
           }else{//新增
             that.$router.push('/')
           }
         }else{
           Toast(res.data.message)
         }
       }, err => {
          Toast('申请失败：'+err)
       })
   },
    

番外篇：图为去上海失恋博物馆照片，中了抖音的毒，跟着女友+朋友+朋友女友（百度大佬），去得瑟。