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

技术背景

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • element-ui多文件上传的实现示例

    上传方案一: 先将文件上传到七牛,再将七牛上传返回的文件访问路径上传到服务器 <div class="upload-music-container"> <el-upload class="upload-music" ref="upload" action="http://up-z2.qiniup.com/" :data="{token:uploadToken}" multiple acce

  • IE9 elementUI文件上传的问题解决

    问题: IE9中无法使用FormData 思路 基于上面的问题,需要使用form表单上传文件 form表单上传会引起页面的刷新,因此需要动态添加一个iframe来避免页面刷新 from表单上传之后需要调用回调,此时需要监听iframe的onload事件 坑 文件上传之后的返回值 Content-Type值不能是application/json 这会导致IE去解析返回结果,最终调用文件的保存或者打开,此处需要与后端协商将Content-Type改为text/plain 如果需要图片回显,回显的图片

  • element-ui 中使用upload多文件上传只请求一次接口

    方法一 不使用组件内部的钩子 <el-upload class="upload-image" ref="upload" multiple :action="baseUrl" list-type="picture" :auto-upload="false" accept="image/*"> <el-button slot="trigger" size

  • element-ui upload组件多文件上传的示例代码

    之前有一篇写的如何同时传递form表单及upload组件文件,如果有多个upload文件该如何传递呢 上代码 html <el-form ref="newform" :model="newform" :rules="rules"> <el-form-item prop="expName" label=""> <el-input v-model="newform.exp

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

    技术背景 Vue + axios + element-ui 问题的产生 一个美好的周五,我正在愉快地打着代码,突然收到一封来自产品的神秘消息,线上活动出 BUG 了!呐尼!怎么可能!一定是你的打开方式不对!打开消息截图,线上的一个聊天室背景突然变成了另一张毫无关联的图(一个大大的太阳),我一看,这不是我刚刚上传的一个图嘛!为什么跑到那里去了! 问题定位 我们所有的静态资源(比如图片)都会上传到一个服务器上,在活动中访问时会统一访问静态资源服务器,而静态资源上传时并没有处理重名问题!!!接口侧仅仅

  • Vue + Element UI图片上传控件使用详解

    Vue + Element UI图片上传控件使用详解

    上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用.首先要安装element并中引入,安装引入过程这里不再赘述. 1.引用element 上传控件. <el-upload action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域) list-type=&qu

  • PHP利用APC模块实现文件上传进度条的方法

    本文实例讲述了PHP利用APC模块实现文件上传进度条的方法.分享给大家供大家参考.具体分析如下: 以前的php5.2之前的版本是不能可使用APC模块的,因为之前的压根就没有这个APC模块,如果想使用APC模块实现上传进度条我们必须是php5.2或更高版本. 从5.2开始APC加入了一个叫APC_UPLOAD_PROGRESS的东东,解决了困扰大家已久的进度条问题.并且它把原来的上传时把临时文件全部缓存到内存改成了当临时文件达到设定值时就自动保存到硬盘,有效地改善了内存利用状况. 它的作用原理是在

  • JSP实用教程之简易文件上传组件的实现方法（附源码）

    JSP实用教程之简易文件上传组件的实现方法（附源码）

    前言 本文主要给大家介绍的是关于JSP简易文件上传组件的实现方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍吧. 文件上传,包括但不限于图片上传,是 Web 开发中司空见惯的场景,相信各位或多或少都曾写过这方面相关的代码.Java 界若说文件上传,则言必称 Apache Commons FileUpload,论必及  SmartUpload.更甚者,Servlet 3.0 将文件上传列入 JSR 标准,使得通过几个注解就可以在 Servlet 中配置上传,无须依赖任何组件.使用第

  • JavaServlet的文件上传和下载实现方法

    先分析一下上传文件的流程 1-先通过前段页面中的选择文件选择要上传的图片 index.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 T

  • Servlet实现文件上传的三种方法总结

    Servlet实现文件上传的三种方法总结 1. 通过getInputStream()取得上传文件. /** * To change this template, choose Tools | Templates * and open the template in the editor. */ package net.individuals.web.servlet; import java.io.DataInputStream; import java.io.FileOutputStream;

  • php文件上传、下载和删除示例

    php文件上传、下载和删除示例

    php文件上传.下载和删除示例大体思路如下,具体内容如下 一.文件上传 1.把上传文件的区域做出来 div1 2.把显示文件的区域做出来 div2 3.提交表单,上传文件 4.服务器接收文件数据 用$_FILE[name]接收 5.处理数据,看上传文件是否有错误 错误有如下几种: 1).上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值 2).上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值 3).文件只有部分被上传 4).

  • JavaBean实现多文件上传的两种方法

    摘要:本文介绍了JavaBean实现多个文件上传的两种方法,分别是使用http协议和ftp协议实现.首先讲述了http协议传送多个文件的基本格式和实现上传的详细过程,之后简单介绍了使用ftpclient 类实现了ftp方式的上传,最后对这两种方法进行了比较. 关键字:JavaBean .http .ftp .ftpclient JavaBean是一种基于Java的软件组件.JSP对于在Web 应用中集成JavaBean组件提供了完善的支持.这种支持不仅能缩短开发时间(可以直接利用经测试和可信任的

  • Java文件上传与文件下载实现方法详解

    Java文件上传与文件下载实现方法详解

    本文实例讲述了Java文件上传与文件下载实现方法.分享给大家供大家参考,具体如下: Java文件上传 数据上传是客户端向服务器端上传数据,客户端向服务器发送的所有请求都属于数据上传.文件上传是数据上传的一种特例,指客户端向服务器上传文件.即将保存在客户端的文件上传一个副本到服务器,并保存在服务器中. 1.上传表单要求 文件上传要求客户端提交特殊的请求--multipart请求,即包含多部分数据的请求.必须将<form/>标签的enctype属性值设为"multipart/form-d

  • php文件上传原理与实现方法详解

    php文件上传原理与实现方法详解

    本文实例讲述了php文件上传原理与实现方法.分享给大家供大家参考,具体如下: 文件上传实际上就是在前段使用一个form表单提交本地文件到服务器,然后在服务器端将文件从临时目录转移到指定目录的过程. 1.php配置文件 php.ini文件中的file uploads部分定义了相关文件上传配置, file_uploads = On 打开文件上传 upload_tmp_dir =临时目录 upload_max_filesize = 2M最大上传大小 max_file_uploads = 20单次最大上

随机推荐