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的文字自动截取(提供源代码)
Aug 09 Javascript
jQuery拖动图片删除示例
May 10 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 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目录操作实例代码
2014/02/21 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php中strtotime函数用法详解
2014/11/15 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
解决Python二维数组赋值问题
2019/11/28 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
怎样自定义一个异常类
2016/09/27 面试题
如何安装ruby on rails
2014/02/09 面试题
2014年高中生自我评价范文
2014/09/26 职场文书
公司处罚决定书
2015/06/24 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
spring cloud 配置中心native配置方式
2021/09/25 Java/Android