使用element-ui怎么上传文件并修改文件名
这期内容当中小编将会给大家带来有关使用element-ui 怎么上传文件并修改文件名,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
创新互联网站建设公司,提供成都网站建设、成都做网站,网页设计,建网站,PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,是专业的做网站团队,希望更多企业前来合作!
技术背景
Vue + axios + element-ui
问题的产生
一个美好的周五,我正在愉快地打着代码,突然收到一封来自产品的神秘消息,线上活动出 BUG 了!呐尼!怎么可能!一定是你的打开方式不对!打开消息截图,线上的一个聊天室背景突然变成了另一张毫无关联的图(一个大大的太阳),我一看,这不是我刚刚上传的一个图嘛!为什么跑到那里去了!
问题定位
我们所有的静态资源(比如图片)都会上传到一个服务器上,在活动中访问时会统一访问静态资源服务器,而静态资源上传时并没有处理重名问题!!!接口侧仅仅是在前面加了一个4位数的随机数,也就是说,当同名图片超过 10000 张时,百分百会有图片被覆盖!!没错是直接覆盖而不是报错!即使不到10000张,同名数量越多,被覆盖概率也就越高。
开始甩锅
遇到问题不用慌!只要锅甩的好,一切问题都不是问题!我直接找到后台负责人,描述了一下情况,只见他云淡风轻地说了一句:这不是我的 KPI 。???我 ** 你个 xx,男人都是大猪蹄子!靠别人是不行了,只能靠自己,还是自己搞一下吧。
尝试偷懒
element-ui 屹立这么多年,我相信它一定能够完成修改文件名的重任,于是满怀期待地打开官方文档,很好!不支持!现在是周五晚上六点半,很好,注定又不能好好吃饭了!
拦截文件上传
文件对象(file)是不能直接修改文件名的,file.name 是只读属性,如果你强行赋值,会直接报错,所以只能拦截掉 element-ui -> uploader 的默认上传行为,改为自己上传。下面为核心 HTML 代码,主要是利用 before-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 || '文件上传失败') }) }
上述就是小编为大家分享的使用element-ui 怎么上传文件并修改文件名了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。
分享名称:使用element-ui怎么上传文件并修改文件名
网站链接:http://myzitong.com/article/popjgg.html