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


Posted in Javascript onNovember 05, 2019

技术背景

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位随机数机制 + 时间戳 + 文件名,要再想覆盖,简直难如程序员找女朋友!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
vue keep-alive 动态删除组件缓存的例子
Nov 04 #Javascript
javascript如何实现create方法
Nov 04 #Javascript
关于vue里页面的缓存详解
Nov 04 #Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 #Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 #Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 #Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 #Javascript
You might like
example2.php
2006/10/09 PHP
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
Yii2中datetime类的使用
2016/12/17 PHP
JQuery里选择超链接的实现代码
2011/05/22 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
python版本五子棋的实现代码
2018/12/11 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
C#怎么让一个窗口居中显示?
2015/10/20 面试题
上课迟到检讨书
2014/01/19 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
公司员工奖惩制度
2015/08/04 职场文书
九年级化学教学反思
2016/02/22 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis
APP界面设计技巧和注意事项
2022/04/29 杂记
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers
TS 类型兼容教程示例详解
2022/09/23 Javascript