element-ui 文件上传修改文件名的方法示例

2023-08-09 21:40:03 70

技术背景

Vue+axios+element-ui

问题的产生

一个美好的周五，我正在愉快地打着代码，突然收到一封来自产品的神秘消息，线上活动出BUG了！呐尼！怎么可能！一定是你的打开方式不对！打开消息截图，线上的一个聊天室背景突然变成了另一张毫无关联的图（一个大大的太阳），我一看，这不是我刚刚上传的一个图嘛！为什么跑到那里去了！

问题定位

我们所有的静态资源（比如图片）都会上传到一个服务器上，在活动中访问时会统一访问静态资源服务器，而静态资源上传时并没有处理重名问题！！！接口侧仅仅是在前面加了一个4位数的随机数，也就是说，当同名图片超过10000张时，百分百会有图片被覆盖！！没错是直接覆盖而不是报错！即使不到10000张，同名数量越多，被覆盖概率也就越高。

开始甩锅

遇到问题不用慌！只要锅甩的好，一切问题都不是问题！我直接找到后台负责人，描述了一下情况，只见他云淡风轻地说了一句：这不是我的KPI。？？？我**你个xx，男人都是大猪蹄子！靠别人是不行了，只能靠自己，还是自己搞一下吧。

尝试偷懒

element-ui屹立这么多年，我相信它一定能够完成修改文件名的重任，于是满怀期待地打开官方文档，很好！不支持！现在是周五晚上六点半，很好，注定又不能好好吃饭了！

拦截文件上传

文件对象（file）是不能直接修改文件名的，file.name是只读属性，如果你强行赋值，会直接报错，所以只能拦截掉element-ui->uploader的默认上传行为，改为自己上传。下面为核心HTML代码，主要是利用before-upload事件来阻止上传

beforeUpload代码：既然file.name是只读属性，那就只能新建一个file对象了。你不仁，就不要怪我不义了！新建的文件名为时间戳+原文件名。

beforeUpload(file){
consttimeStamp=newDate()-0
constcopyFile=newFile([file],`${timeStamp}_${file.name}`)
this.uploadFile(copyFile)
returnfalse
}

uploadFile代码：构建一个FormData对象，仅此而已！

uploadFile(file){
constformdata=newFormData()
formdata.append('lbf-file-upload',file)
formdata.append('name','lbf-file-upload')
formdata.append('_csrfToken',this.$ajax.getCsrfToken()._csrfToken)
this.postForm(formdata)
}

postForm代码：利用axios库上传到服务器。

postForm(formdata){
this.$ajax.post('/xxx/ajax/general/file/files',formdata).then(res=>{
if(res.code==null||res.code===0){
//dosomething
}else{
this.$message.error(res.msg||res.message||'文件上传失败')
}
}).catch((err)=>{
this.$message.error(err.message||'文件上传失败')
})
}

就此搞定！以后所有的文件上传都将自动带上时间戳前缀，后台4位随机数机制+时间戳+文件名，要再想覆盖，简直难如程序员找女朋友！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

element-ui 文件上传修改文件名的方法示例

热门推荐

随机推荐