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('.diggit')[0].click(),有惊喜哦
公众号
往期文章
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- 超详细!Vue-Router手把手教程
- vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
- 微信小程序实现搜索关键词高亮
- 超详细!Vue的九种通信方式
- 超详细!Vuex手把手教程
个人主页
接受失败,但不选择放弃!