您的位置:首页 > 产品设计 > UI/UE

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

2019-11-07 07:04 4780 查看

技术背景

Vue + axios + element-ui

问题的产生

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

问题定位

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

开始甩锅

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

尝试偷懒

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

拦截文件上传

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

<el-upload :before-upload="beforeUpload">
<i class="el-icon-plus" />
</el-upload>

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

beforeUpload(file) {
const timeStamp = new Date() - 0
const copyFile = new File([file], `${timeStamp}_${file.name}`)
this.uploadFile(copyFile)
return false
}

uploadFile 代码:构建一个 FormData 对象,仅此而已!

uploadFile(file) {
const formdata = new FormData()
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) {
// do something
} else {
this.$message.error(res.msg || res.message || '文件上传失败')
}
}).catch((err) => {
this.$message.error(err.message || '文件上传失败')
})
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助

您可能感兴趣的文章:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  element 文件上传