前端开发中遇到的问题以及解决方案记录

2024.05.27-2024.05.31

1、elementui的el-upload组件在自定义上传时第二次上传没用

问题：第一次导入文件成功，然后需要再导入其他文件，第二次再点击导入选择完文件确定后就没反应了。

分析：首先一个前提是我设置了el-upload的limit为1。在第二次导入时，el-upload的fileList已经记录了我们上一次导入成功的文件，再次上传时在源码中被如下代码拦截下来了。此时fileList的length为1，即上一次传入成功的文件，files的length也为1，相加就大于了limit。此时就被return了。所以第二次点击没反应。（个人觉得组件加个提示好一点，组件进入这个if就提示大于了limit数量，这样使用者一下就知道问题了，节省了开发时间）。

解决：在每一次上传成功后去清空fileList，但是这只使用于你不需要显示已上传文件列表，只需要每次导入数据成功即可。

2、点击按钮取消axios请求

问题：在开发中遇到一个需求：上传一个大数据量的文件，上传时会有进度提示，同时会有取消按钮，点击按钮会取消请求。

解决：使用axios官网提供的API。官网已经写得很易懂了，用法也很简单。点击前往。