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

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

 <van-uploader

                accept="*"

                v-model="fileList"

                multiple

                :max-count="4"

                :after-read="afterRead"

                :before-read="beforeRead"

              />

在下方使用时：

    

   // 图片上传后回调
    beforeRead(file) {
      if (Array.isArray(file)) {
        file.forEach((item) => {
          console.log(item, '11111')
          if (
            !item.type.startsWith('image') &&
            !item.type.startsWith('video')
          ) {
            Toast.fail('请上传图片或视频')
            return false
          } else if (item.size > 104857600) {
            Toast.fail('选择上传内容不能超过100M')
            return false
          } else {
            return true
          }
        })
        return true
      } else {
        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 = '上传中...'
          setTimeout(() => {
            this.setUpload(file)
          }, 1000)
        })
      } else {
        file.status = 'uploading'
        file.message = '上传中...'
        setTimeout(() => {
          this.setUpload(file)
        }, 1000)
      }
    },