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 相关文章推荐
关于JavaScript的with 语句的使用方法
May 09 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
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
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
Node.js简单入门前传
2017/08/21 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
python调用其他文件函数或类的示例
2019/07/16 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
Python打印不合法的文件名
2020/07/31 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
2014年九一八事变演讲稿
2014/09/14 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
倡议书的格式写法
2015/04/28 职场文书
初三化学教学反思
2016/02/22 职场文书
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android