手机端使用vant uploader做多图上传

<template>
<div >
  <uploader  v-model="extant" :after-read="afterRead" :multiple='multiple' :maxCount="maxLen" :before-delete="deleteImgList" :before-read="beforeRead"/>
</div>
</template>
<script>
  import { Uploader } from 'vant'
  export default {
    components: {
      Uploader
    },
    data () {
      return {
        extant: [],
        vueFile: {},
        imgList: []
      }
    },
    watch: {
      'extantFiles': {
        handler: function (val) {
          this.getlist(val)
        },
        immediate: true
      }
    },
    props: {
      extantFiles: {
        type: Array,
        default: function () {
          return ''
        }
      },
      maxLen: '',
      type: {
        type: String,
        default: ''
      },
      multiple: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      beforeRead (file) {
        let number = this.extantFiles.length + file.length
        this.extantFiles.length
        if (number > this.maxLen) {
          this.$vux.toast.text('上传图片数量过多')
          return false
        }
        return true
      },
      afterRead (file) {
        this.imgList = []
        if (file.length > 0) {
          this.imgList = file
          this.$emit('imgList', this.imgList)
          this.imgList.forEach((item, index) => {
            item.loading = false
          }) // 为了校验图片是否上传成功
          for (let index = 0; index < file.length; index++) {
            this.postImg(file[index], index)
          }
        } else {
          this.imgList.push(file)
          this.imgList.forEach((item, index) => {
            item.loading = false
          })  // 为了校验图片是否上传成功
          this.$emit('imgList', this.imgList)
          let index = 0
          this.postImg(file, index)
        }
      },
      postImg (file, index) {
        file.status = 'uploading'
        file.message = '上传中...'
        this.$api.signImgList('get', {action: 'work_order_img'}, res => {
           你的上传请求
           this.imgList[index].loading = true
              if (this.imgList.length > 0) {
                let loading = this.imgList[this.imgList.length - 1].loading // 为了校验图片是否上传成功
                if (loading) {
                  file.status = ''
                  file.message = ''
                }
              }
        }).catch(err => {
          // alert(JSON.stringify(err))
          console.log('err', err)
          file.status = 'failed'
          file.message = '上传失败'
          this.extant.forEach((item, index) => {
            if (item.name === file.name) {
              this.extant.splice(index, 1) // 上传失败后清除正在上传的图片
            }
          })
        })
      },
      deleteImgList (file) {
        this.extantFiles.forEach((item, index) => {
          if (item.fileUrl === file.fileUrl) {
            this.extantFiles.splice(index, 1)
          }
        })
      },
      //从父组件拿需要渲染的图片列表
      getlist (val) {
        this.extant = val
        for (let i = 0; i < this.extant.length; i++) {
          this.extant[i].url = this.extant[i].fileUrl
        }
      }
    }
  }
</script>
<style>
.van-uploader__preview-image {
    display: block;
    width: 65px;
    height: 65px;
    overflow: hidden;
}
.van-uploader__upload { 
    width: 65px;
    height:65px; 
}
</style>

```go
afterRead 里面上传到服务器自己可以修改请求