在使用Vant中Uploader过程中遇到的坑：图片状态更改等

图片允许多张上传，在使用file.status时总是不生效，直接跳转到成功状态，后来尝试加入了定时器；同时多张上传时采用判断数组的方式

 

                accept="*"

                v-model="fileList"

                multiple

                :max-count="4"

                :after-read="afterRead"

                :before-read="beforeRead"

              />

在下方使用时：

    // 图片上传后回调

    beforeRead(file) {

      if (!file.type.startsWith('image') && !file.type.startsWith('video')) {

        Toast.fail('请上传图片或视频')

        return false

      } else if (file.size > 104857600) {

        Toast.fail('选择上传内容不能超过100M')

        return false

      } else {

        return true

      }

    },

    setUpload(file) {

      let that = this

      setTimeout(() => {

        let config = {

          headers: {

            //添加请求头

            'Content-Type': 'multipart/form-data',

          },

        }

        let deviceFile = []

        let params = new FormData()

        if (Array.isArray(file)) {

          //因为该组件单选是对象，多选是数组

          deviceFile = file

          console.log(deviceFile, 'deviceFile')

        } else {

          deviceFile.push(file)

        }

        deviceFile.map((item) => {

          //files是后台参数name字段对应值

          params.append('file', item.file)

        })

        // 文件上传状态

        Toast('文件正在上传请等候，请收到上传成功提示后再关闭页面！')

        //添加上传状态，避免用户在上传未完成时点击提交按钮

        this.isLoading = false

        // params.append('file', file.file)

        this.$http({

          // 这里填写的是上传接口的内容

        })

          .then((res) => {

            if (res.data.code == 0) {

              Toast.success('上传成功!')

              // 文件成功状态

              if (Array.isArray(file)) {

                file.forEach((item) => {

                  item.status = 'done'

                  item.message = '上传成功'

                })

              } else {

                file.status = 'done'

                file.message = '上传成功'

              }

              this.isLoading = true

            }

            res.data.data.map((item) => {

              that.fileid.push(item.fileid)

            })

          })

          .catch()

        file.status = ''

        file.message = ''

      }, 1000)

    },

    afterRead(file) {

      // 文件上传状态

      if (Array.isArray(file)) {

        file.forEach((item) => {

          item.status = 'uploading'

          item.message = '上传中...'

          this.setUpload(file)

        })

      } else {

        file.status = 'uploading'

        file.message = '上传中...'

        this.setUpload(file)

      }

    },