Element组件Upload修改上传文件名
1，前言
事情的起因是我的leader告诉我系统的合同上传出现问题了，文件上传失败，接口也没调用。我看了一下时间，17:15了，还有45分钟就要关机回家了，吓得我赶紧定位问题。
2，问题定位
公司的上传是用的emelent-ui的Upload二次封装，找到了组件源码(不是俺封装的)，看了一下逻辑，发现问题出在后缀名上。客户上传的文件后缀是.PDF，而组件中未兼容大小写，在before-upload事件中就阻止了。于是我放开了大写后缀，哦豁，文件上传接口居然也不支持大写，跑去问后端，告诉我要统一小写，不能放开大写。没办法，那就自己修改一下吧。
3，实现
发现Upload中，在before-upload直接修改file是不行的，因为是只读属性。所以我采用了手动上传
3.1，before-upload回调
在回调中，我们可以拿到file参数，这个就是我们上传的文件，定义一个变量nama，值为toLowerCase转换成小写的文件名，通过new File创建一个file对象，名字就是转换后的name
// 上传之前的回调 handleBeforeUpload(file) { const littleName = file.name.toLowerCase() const copyFile = new File([file], littleName) this.handlePddUploadFile(copyFile) return false } } 复制代码3.2，自定义上传
这里我们新建一个form对象，携带我们的额外参数
// 自定义的上传form handlePddUploadFile(copyFile) { const formdata = new FormData() formdata.append('file', copyFile) formdata.append('save_org_name', this.data.save_org_name) formdata.append('behavior', this.data.behavior) formdata.append('uploadFile', this.data.uploadFile) formdata.append('safe', this.data.safe) this.handlePddPostForm(formdata) } 复制代码然后调用axios实现上传
async handlePddPostForm(formdata) { try{ const res = await axios.post(this.action, formdata, { headers: this.headers }) this.handleUploadSuccess(res.data) } catch (error) { Top.alert(error) } } 复制代码如果看了觉得有帮助的，我是@鹏多多，欢迎 点赞 关注 评论；END
PS：在本页按F12，在console中输入document.querySelectorAll('.like-btn')[0].click()，有惊喜哦
作者：鹏多多
链接：https://juejin.cn/post/7020223087513878559