element-plus el-upload组件自定义上传没有进度条怎么办,一行代码解决!!!

850 阅读1分钟

先说结论,再说分析

function httpRequest(e) {
      const formData = new FormData()
      formData.append('file', e.file)
      return server({ // server为基于axios封装的请求方法
        url: 'api/upload',
        method: 'post',
        data: formData,
        onUploadProgress: event => e.onProgress({ percent: event.progress * 100 }) // 一行不多不少
      }).then(() => {
        return new Promise((resolve) => {// 为什么要这么做?
          setTimeout(() => {
            resolve()
          }, 500)
        })
      })
    }

为什么要这么做?加一下console.log

   // 自定义上传
    function httpRequest(e) {
      const formData = new FormData()
      formData.append('file', e.file)
      return server({ // server为自己封装的请求方法
        url: 'api/upload',
        method: 'post',
        data: formData,
        onUploadProgress: event => {
+          console.log('进度: ', event);
           e.onProgress({ percent: event.progress * 100 })
        }// 解决自定义上传没有进度条
      }).then(() => {
+        console.log('上传完成')
         return new Promise((resolve) => {
          setTimeout(() => {
            resolve()
          }, 500)
         })
      })
    }

image.png

如果不处理会出现这样的问题(上传成功后进度条卡住)

image.png

为什么加了这么一行问题就解决了?且看代码分析

下载 element-plus 源码

image.png

搜索关键字 httpRequest

image.png

image.png

image.png

image.png

image.png

修改的就是uploadFiles就是上传列表的数据

return new Promise((resolve) => {
  setTimeout(() => {
    resolve()
  }, 500)
 })

这段代码就是通过promise返回值穿透 延时的调用 options.onSuccess 方法

const options: UploadRequestOptions = {
    headers: headers || {},
    withCredentials,
    file: rawFile,
    data: beforeData,
    method,
    filename,
    action,
    onProgress: (evt) => {
      onProgress(evt, rawFile)
    },
    onSuccess: (res) => {
      onSuccess(res, rawFile)
      delete requests.value[uid]
    },
    onError: (err) => {
      onError(err, rawFile)
      delete requests.value[uid]
    },
  }
  const request = httpRequest(options)
  requests.value[uid] = request
  if (request instanceof Promise) {
    request.then(options.onSuccess, options.onError)
  }

用定时器会不会太low了,如果网络波动500ms会不会短呢?有没有更好的办法?

image.png

nextTick 做异步会不会高大上一些,而且不会受到网络延迟的影响!