数据定义

data() {
    return {
        fileList: [],
        vedioList: [],
        formData: '',
        fileTypes: 'image/png,image/jpeg,image/jpg,image/jpeg',
    }
},
beforeMount() {
    this.formData = new FormData()
},

拍摄视频上传

<van-uploader
    v-if="radio === '1'"
    v-model="vedioList"
    accept="video/*"
    :max-count="1"
    :max-size="52428800"
    capture="camera"
    :after-read="(file, detail) => uploadAfterReadFnVedio(file, detail, '现场视频')"
    :before-delete="(e, $event) => { uploaderBeforeDeleteVedio(e, $event) }">
</van-uploader>

拍摄视频上传事件

uploadAfterReadFnVedio(file, { index }, name) {
	 this.formData.set('files', file.file)
	 file.status = 'uploading'
	 file.message = '上传中...'
	 // 此时可以自行将文件上传至服务器
	 UploadVideo(this.formData)
	     .then((res) => {
	         this.vedioList.push({ url: res.data[0], key: res.data[0], name: name })
	         this.vedioList.splice(index, 1)
	     })
	     .catch((_) => {
	         // eslint-disable-next-line no-param-reassign
	         file.status = 'failed'
	         // eslint-disable-next-line no-param-reassign
	         file.message = '上传失败'
	     })
},

选择多张图片上传

<van-uploader
    v-model="fileList"
    :accept="fileTypes"
    multiple
    :max-size="5242880"
    :max-count="6"
    :after-read="(file, detail) => uploadAfterReadFn(file, detail, reqSubmitSBSJSBGZ.ListPic, '现场图片')"
    :before-delete="(e, $event) => { uploaderBeforeDelete(e, $event, reqSubmitSBSJSBGZ.ListPic) }">
</van-uploader>

多张图片上传事件

uploadAfterReadFn(file, { index }, list, name) {
   const types = this.fileTypes.split(',')
   // 判断是一张还是多张图片
   if (Array.isArray(file)) {
       file.forEach(item => {
           if (!types.find((v) => v === item.file.type)) {
               this.$toast({
                   type: 'fail',
                   message: '请上传正确的图片',
                   className: 'noticeWidth'
               })
           }
           if (item.file.size <= 5 * 1024 * 1024) {
               this.$toast({
                   type: 'fail',
                   message: '上传文件超过5M',
                   className: 'noticeWidth'
               })
           }
           this.formData.set('files', item.file)
           // eslint-disable-next-line no-param-reassign
           item.status = 'uploading'
           // eslint-disable-next-line no-param-reassign
           item.message = '上传中...'
           // 此时可以自行将文件上传至服务器
           UploadFile(this.formData)
               .then((res) => {
                   this.fileList.push({ url: item.content, isImage: true, key: res.data[0] })
                   this.fileList.splice(index, 1)
                   list.push({ url: res.data[0], isImage: true, key: res.data[0] })
               })
               .catch((_) => {
                   // eslint-disable-next-line no-param-reassign
                   item.status = 'failed'
                   // eslint-disable-next-line no-param-reassign
                   item.message = '上传失败'
               })
       })
   } else {
       if (!types.find((v) => v === file.file.type)) {
           this.$toast({
               type: 'fail',
               message: '请上传正确的图片',
               className: 'noticeWidth'
           })
           return false
       }
       if (file.file.size > 5 * 1024 * 1024) {
           this.$toast({
               type: 'fail',
               message: '上传文件超过5M',
               className: 'noticeWidth'
           })
           return false
       }
       this.formData.set('files', file.file)
       // eslint-disable-next-line no-param-reassign
       file.status = 'uploading'
       // eslint-disable-next-line no-param-reassign
       file.message = '上传中...'
       // 此时可以自行将文件上传至服务器
       UploadFile(this.formData)
           .then((res) => {
               this.fileList.push({ url: file.content, isImage: true, key: res.data[0] })
               this.fileList.splice(index, 1)
               list.splice(index, 1, {
                   url: res.data[0],
                   value: res.data[0],
                   key: name
               })
               // eslint-disable-next-line no-param-reassign
               list = [...list]
           })
           .catch((_) => {
               // eslint-disable-next-line no-param-reassign
               file.status = 'failed'
               // eslint-disable-next-line no-param-reassign
               file.message = '上传失败'
           })
   }
},

toast样式

<style>
.noticeWidth{
    min-width: 150px !important;
    line-height: 34px;
    font-size: 24px;
}
</style>