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 相关文章推荐
轻量级 JS ToolTip提示效果
Jul 20 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
JavaScript实现九宫格拖拽效果
Jun 28 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
php格式化日期实例分析
2014/11/12 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
python网络编程之文件下载实例分析
2015/05/20 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
Python箱型图处理离群点的例子
2019/12/09 Python
python 命名规范知识点汇总
2020/02/14 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
如何用Python 加密文件
2020/09/10 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
介绍一下Ruby的特点
2013/01/20 面试题
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
python实现局部图像放大
2021/11/17 Python
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android