vant-uploader多附件上传-Toy模板网

这篇具有很好参考价值的文章主要介绍了vant-uploader多附件上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

van-uploader上传组件遇到的问题

问题一：部分安卓机只有相机和录音选项，没有相册选项。

解决：accept=“image/*”

问题二：移动端上组件只能上传图片，没有文件管理选项，不能上传其他文件类型（pdf, docx等）

解决：accept=“” // 不限制上传的文件类型

     <van-uploader
            :disabled="disabledimg"
            style="width: 100%"
            preview-size="100"
            :after-read="afterReadSQ"
        
            v-model="fileList"
            multiple
            :max-count="12"
            :max-size="10000 * 1024"
            @oversize="onOversize"
            :before-delete="beforedelete"
            accept=""
          >
            <el-button :loading="loading" size="small" type="primary">上传附件</el-button>
          </van-uploader>

vant-uploader多附件上传文章来源地址https://www.toymoban.com/news/detail-513480.html

:before-read=“beforeRead” 可以把这个属性去掉或者在里面判断上传的文本类型

代码

  数据
      disabledimg: false,
      filelist: [],

 方法
    // beforeRead(file) {
    //   console.log('file111', file)
    //   if (file.length) {
    //     console.log('1')
    //     file.forEach(item => {
    //       console.log('2', item)
    //       if (item.type === 'image/jpeg' || item.type === 'image/png' || item.type === 'image/jpg') {
    //         return true
    //       } else {
    //         Toast('请上传 jpg/png/ 格式图片')
    //         return false
    //       }
    //     })
    //     return true
    //   } else {
    //     if (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg') {
    //       return true
    //     } else {
    //       Toast('请上传 jpg/png/ 格式图片')
    //       return false
    //     }
    //   }
    // },
    onConfirm(value) {
      console.log('vvvv', value)
      this.value = value.text
      this.showPicker = false
    },
    deleteimg(file) {
      // console.log('deleteimg', file)
      // console.log('fileList', this.fileList)
      // this.fileList = []
      // this.filelist = []
      // this.imgidlist = []
    },
    beforedelete(file, index) {
      if (this.disabledimg) {
        return false
      } else {
        console.log('删除', file, index)
        this.imgidlist.splice(index.index, 1)
        this.filelist.splice(index.index, 1)
        // this.fileList.splice(index, 1)
        console.log('this.imgidlist', this.imgidlist)

        return true
      }
    },

    // 员工诉求 上传图片/文件
    afterReadSQ(file) {
      console.log(file, '====after-read')
      // return
      this.disabledimg = true
      this.filelist.push(file)
      console.log('获取图片信息', this.filelist)
      console.log('ff', file)
      if (file.length) {
        file.forEach(element => {
          element.status = 'uploading'
          element.message = '上传中...'
        })
      } else {
        file.status = 'uploading'
        file.message = '上传中...'
      }

      const FormDatas = new FormData()
      // FormDatas.append('file', file.file)
      if (this.filelist.length > 1) {
        if (this.filelist[1].length) {
          console.log('0111')
          this.filelist[1].forEach(item => {
            console.log('01111', item)
            FormDatas.append('file', item.file)
          })
        } else {
          console.log('0222')
          this.filelist.forEach(item => {
            FormDatas.append('file', item.file)
          })
        }
      } else {
        if (this.filelist[0].length) {
          // 多个上传
          console.log('111')
          this.filelist[0].forEach(item => {
            console.log('1111', item)
            item.file.status = 'uploading'
            item.file.message = '上传中...'
            FormDatas.append('file', item.file)
          })
        } else {
          console.log('222')
          this.filelist.forEach(item => {
            FormDatas.append('file', item.file)
          })
        }
      }

      // console.log(FormDatas.get('file'))
      //  return
      // 上传图片
      workerOrderFtpReturnUrl(FormDatas)
        .then(res => {
          // debugger
          if (res.code == '000000') {
            if (file.length) {
              file.forEach(element => {
                element.status = 'done'
                element.message = '上传成功'
              })
            } else {
              this.imgidlist = []
              file.status = 'done'
              file.message = '上传成功'
            }
            console.log('获取图片data', res.data)
            file.status = 'done'
            file.message = '上传成功'
            res.data.forEach(element => {
              this.imgidlist.push(element.fileUrl)
            })

            this.disabledimg = false
            // console.log('imgidlist99999999999999999999', this.imgidlist)
          } else {
            this.disabledimg = false
            Toast(res.mesg)
            if (file.length) {
              file.forEach(element => {
                element.status = 'failed'
                element.message = '上传失败'
              })
            } else {
              file.status = 'failed'
              file.message = '上传失败'
            }
            // file.status = 'failed'
            // file.message = '上传失败'
          }
        })
        .catch(err => {
          this.disabledimg = false
          Toast('上传失败')
          file.status = 'failed'
          file.message = '上传失败'
        })

      // setTimeout(() => {
      //   file.status = 'failed'
      //   file.message = '上传失败'
      // }, 1000)
    },