使用el-upload组件实现递归多文件上传_el-upload上传多个文件

最新推荐文章于 2024-08-17 13:13:51 发布

2401_85123349

最新推荐文章于 2024-08-17 13:13:51 发布

阅读量414

点赞数 5

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2401_85123349/article/details/139597355

版权

  fileNum: '',  // 单词递归上传的文件
  upFileList: '',//需要依次上传的待传列表
  percentTotal: 0,//总上传个数
  percentNow: 0,//当前上传个数
  showDesc: '',//结束文案
  showPercent: false,//显示上传进度条
  time: null,// change事件是否结束 是否可以直接调手动上传事件（目前设置1.5s）
  disabledUpload: false,//正在上传中 禁止再次选择文件上传

  fileData: {
  },//上传参数

  fileList1: [],

}

},
activated: {
// 对于每次进入页面想要刷新的数据，放在这里调用即可例如 this.getList()
},
methods: {
// 超出限制个数提示
handleExceed (files, fileList) {
console.log(‘当前限制一次性最多上传1000个文件’, files, fileList)
this.$message.warning(“当前限制一次性最多上传1000个文件”)
},
changeFile (file, fileList) {
this.disabledUpload = true

  console.log('changeFile', file, fileList)
  const isLt2M = file.size / 1024 / 1024 < 100
  if (!isLt2M) {
    this.$message.warning('上传文件大小不能超过 100M')
    // return false // 这个return无效 故去掉
  }

  if (!(file.name.indexOf('.pdf') > -1)) {
    this.$message.warning("当前仅支持pdf格式的文件上传")
    // return false // 这个return无效 故去掉
  }


  // 符合条件的进入待传列表
  this.upFileList = []
  for (let x of fileList) {
    if (x.raw && (x.name.indexOf('.pdf') > -1) && (x.size / 1024 / 1024 < 100)) {// 过滤掉非pdf 和小于100M的
      this.upFileList.push(x.raw)
      this.percentTotal = this.upFileList.length
      this.percentNow = 0
      this.showPercent = false
      this.showDesc = ''
    }
  }

  clearTimeout(this.time)
  this.time = setTimeout(() => {
    this.time = null
    console.log('防抖 高频触发后n秒内只会执行一次  再次触发重新计时')
    this.fnBegin()//说明此时change了所有文件了 可以上传了
  }, 1500)

},
fnBegin () {
  console.log('此时change了所有文件 开始上传', this.upFileList)
  this.submitUpload2()
},
// 正式上传掉后端接口
submitUpload2 () {
  if (this.upFileList.length > 0) {
    this.showPercent = true

    this.fileNum = new FormData()  // new formData对象
    this.fileNum.append('file', this.upFileList[0])  // append增加数据
    this.fileNum.append('name', this.upFileList[0].name)  // append增加数据

    let _vm = this
    axios({
      url: '/chc-shop/api/v1/accident/szcp/electronicfile/upload',
      headers: {
        "Content-Type": "multipart/form-data",
      },
      method: "post",
      data: this.fileNum,
    })
      .then(res2 => {
        // 每次上传当前一个后 不论成功失败就删除当前这个--如果上传失败想继续传当前这个 就把这两行注释掉
        this.percentNow = this.percentNow + 1
        this.upFileList.shift()


        console.log('上传返回', res2)
        if (res2.data.success) {
          // this.$message({
          //   message: "上传成功",
          //   type: 'success'
          // })

          // 进行递归 上传下一个
          this.submitUpload2()

        } else {
          _vm.$message({
            message: res2.data.return_message || '上传失败',
            type: "error",
          })

          // 进行递归 上传下一个
          this.showDesc = '上传结束，部分文件上传失败'
          this.submitUpload2()
        }
      })
      .catch(error => {
        console.log(error)
        _vm.$message({
          message: error || '上传失败',
          type: "error",
        })

        // 每次上传当前一个后 不论成功失败就删除当前这个--如果上传失败想继续传当前这个 就把这两行注释掉
        this.percentNow = this.percentNow + 1
        this.upFileList.shift()

        // 进行递归 上传下一个
        this.showDesc = '上传结束，部分文件上传失败'
        this.submitUpload2()
      })

  } else {
    this.disabledUpload = false
    this.showPercent = false
    this.upFileList = [] //清空待传列表

    this.$refs.upload1.clearFiles()
    this.fileList1 = []

    if ((this.percentNow == this.percentTotal) && this.percentTotal) {
      this.$message.success(this.showDesc ? this.showDesc : '已全部上传成功！')
      this.percentTotal = 0
      this.percentNow = 0
      this.showDesc = ''

    } else if ((this.percentNow == this.percentTotal) && this.percentTotal == 0) {
      this.$message.warning('请先选择文件！')
      this.percentTotal = 0
      this.percentNow = 0
    } else {
      this.$message.success('已部分上传成功，且取消后续文件上传！')
      this.percentTotal = 0
      this.percentNow = 0

    }

    return false
  }

},
// 终止后需上传
submitAbort () {
  this.showPercent = false
  // .abort()不生效，故自己直接将this.upFileList置空 那么就不会走到递归了 就制止后续的上传了
  this.upFileList = []


  // this.upFileList.forEach(ele => {
  //   this.$refs.upload1.abort(ele)
  // })
  // this.$refs.upload1.abort()
  // this.$message.warning('已取消后续文件上传！')
},
fileErr (err, file, fileList) {
  this.$message({
    message: file.name + '上传失败',
    type: "error",
  })
},



// 这两个事件不会再触发--因为阻止了自动上传