赶时间的可以直接拉到最后

先介绍下背景：本人是搞Java后端的（没怎么系统学过前端，但是勉强了解一点），安排了个上传文件时显示进度条的任务给我。项目是vue2的

接下来我就开始搜索，刚开始还没意识到这个看似简单的问题能花我一下午的时间。

el-upload上传文件时使用element自带进度条_element upload上传进度_NJR10byh_migu的博客-CSDN博客

了解到的基本上都是这样说可以解决，但是因为项目请求接口用的时封装好的api，所以我参考了之后写法如下（这里就只贴关键部分了，其他地方大同小异）：

const res = await uploadResource(formData, {
        onUploadProgress: progressEvent => {
          let percent =((progressEvent.loaded / progressEvent.total) * 100) | 0;
          params.onProgress({ percent: percent });
        }
      })

改了之后，自信保存，然后自测，发现没起作用，于是我又接着搜索，找到了这个：

文件上传el-upload，使用自定义:http-request，不显示默认的进度条 - 吃的快不吐骨头 - 博客园 (cnblogs.com)

改了之后，自信保存，然后自测，发现没起作用，于是我又接着搜索，尝试了其他自定义进度条的方式，还是不能动态显示进度条数据，然后又是搜索

填坑日志-elementUI el-upload上传组件没有进度条_weixin_33937778的博客-CSDN博客

说是项目中使用了的mock的原因，但是我全局搜索了项目，确实是没有用到mock。

最后实在没辙了，干脆死马当活马医，把封装好的api换成最原始的axios，它居然可以了！！

this.$axios({
        url: process.env.XXXX + '/xxx/upload',
        data: formData,
        method: "post",
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: event => {
          params.file.percent = event.loaded / event.total * 100
          params.onProgress(params.file)
        },
      })

总结：如果项目中使用的时封装好了api，可以尝试换成axios或者request。

这是我的第一篇博客，如果有写的不对的地方，还请指正。另外，问题虽然解决了，但是却还是不太明白，我感觉很有可能是我的写法有问题，想问下有大佬知道原因吗