van-uploader上传图片

<van-uploader
    :disabled="form.status=='1'"
     style="display: flex;"
     v-model="fileList"
     multiple
     :max-count="4"
     :after-read="afterRead">
     <div style="width: 100%;" v-show="fileList.length < 4">      
     <img style="width:100%;height:75px;"src="./images/uploadbg.png" alt=""></div>
 </van-uploader>

new Vue({
	fileList: [],
	formData: new FormData(),
	form: {}
})
methods: {
	afterRead(file) {
      if(file instanceof Array) {
      // 多张图片
        file.forEach(f => {
          this.formData.append('files',f.file)
        })
      }else{
      // 单张图片
        this.formData.append("files",file.file)
      }
    },
    // 提交按钮	
    submitBtn() {
      if(this.fileList.length <= 0) {
        vant.Toast('提示内容');
        return;
      }
      vant.Toast.loading({
        duration: 0,
        message: '提交中...',
        forbidClick: true
      });
      // api 要求传参 pathCode （根据api而定）
      this.formData.append('pathCode','0102')
      axios({
      	// 上传图片到服务器api
        url:`https://www.qyflc.com/gateway-api/file/uploads`,
        data:this.formData,
        method:'POST',
        headers: {
          "content-type": "multipart/form-data",
        }
      }).then((res) => {
        this.form.status = '1'
        this.form.images = res.data.data.map((item) => {
          return item.url
        })
        // 上传图片成功后的处理逻辑，仅上传功能可以无视
        return axios({
          url:`https://www.qyflc.com/gateway-api/device/maintain`,
          data:this.form,
          method:'PUT',
        }).then((response) => {
          if(response.data.code == '200') {
          	// 强制刷新页面
            location.reload()
            vant.Toast.clear()
            vant.Toast.success('提交成功');
          }else{
            vant.Toast.fail('提交失败');
          }
        })
      })
    },
}