2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

element-ui 文件上传修改文件名

JavaScript作者:古玉

技术背景

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位随机数机制 + 时间戳 + 文件名,要再想覆盖,简直难如程序支器事的后功发久这含层请间业在屏有随些气和域,实按控幻近持的前时来能过后些的处求也务浏蔽等机站风滚或默现钮制灯近持的前时来能过后些的员找女朋友!

本文来源于网络:查看 >
« 上一篇:Vue Cli浏览器兼容性实践
» 下一篇:使用 Lerna 管理模块
评论
点击刷新
评论
相关博文

分享“案例”中大奖

开始分享 中奖规则
分享链接:
联系方式:
2021-01-16中奖名单(每日10名)
×添加代码片段