Element-upload手动上传文件以及限制文件类型及大小

Bertha 。 2022-08-29 10:26 406阅读 0赞

### Element-upload手动上传文件以及限制文件类型及大小 ###

根据项目需求只能把上传功能做成手动上传  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70]  
手动上传只需设置  
`:auto-upload = "false"`

限制文件格式及大小写在了`on-change`钩子中

uploadImageChange(file, fileList) { 
          this.fileList = fileList;
          /* 判断图片格式以及大小 */
          /* 查找 . 最后出现的位置 并提取字符串 +1 为了解决substring()方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。*/
          const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
          const whiteList = ["jpg", "png"];
          const isLt5M = file.size / 1024 / 1024 > 5;
          const isSuffix = whiteList.indexOf(fileSuffix) === -1;
          if (isSuffix) { 
            this.$message.error(this.$t('images_class'), "error");
            /* 验证不通过删除此文件 */
            const currIdx = this.fileList.indexOf(file);
            this.fileList.splice(currIdx, 1);
            return;
          }
          if (isLt5M) { 
            this.$message.error(this.$t('images_size'), "error");
            const currIdx = this.fileList.indexOf(file);
            this.fileList.splice(currIdx, 1);
            return;
          }
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70]: /images/20220829/ab76418d4f2b4789b7f4c193c27cfdf1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，406人围观）

还没有评论，来说两句吧...

相关阅读

相关 iis上传文件大小限制

iis上传文件大小限制在web.config文件中加入如下语句： <security> <requestFiltering> <r

深藏阁楼爱情的钟/ 2024年04月06日 14:10/ 0 赞/ 77 阅读

相关 input限制上传的文件大小

需要限制`input`上传的文件大小默认 `input` 上传文件的单位为 Byte (字节) 单位换算 1024Byte = 1KB 1024KB =

待我称王封你为后i/ 2023年02月27日 12:10/ 0 赞/ 39 阅读

相关【ownCloud】ownCloud上传文件大小限制

问题描述：本地部署的ownCloud服务器，上传文件提示文件大小限制2MB ![20200807103257219.png][] 解决方法：修改php配置文件，放开限制

Bertha 。/ 2022年11月25日 04:13/ 0 赞/ 465 阅读

相关 JavaScript实现限制文件上传类型和大小

JavaScript实现限制文件上传类型和大小 <title>文件上传前台控制检测程序 v0.6</title> <style> body

ゝ一纸荒年。/ 2022年09月12日 04:48/ 0 赞/ 275 阅读

相关文件上传文件大小和类型

文件上传文件大小和类型一、文件上传 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

偏执的太偏执、/ 2022年09月07日 05:58/ 0 赞/ 219 阅读

相关 Nginx 文件上传大小限制设置

需要找到对应的Nginx 配置文件。我这边的配置文件在/etc/nginx/conf.d下面 ![20210804154500938.png][] 在配置文件中添加如下

水深无声/ 2022年09月03日 00:16/ 0 赞/ 276 阅读

相关 Element-upload手动上传文件以及限制文件类型及大小

Element-upload手动上传文件以及限制文件类型及大小根据项目需求只能把上传功能做成手动上传 ![在这里插入图片描述][watermark_type_

Bertha 。/ 2022年08月29日 10:26/ 0 赞/ 407 阅读

相关 springboot 文件上传大小限制

错误信息 the request was rejected because its size (13472920) exceeds the configured maximu

╰+哭是因爲堅強的太久メ/ 2022年04月23日 00:36/ 0 赞/ 363 阅读

相关 SpringBoot 配置上传文件大小限制

org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: Th

迈不过友情╰/ 2022年03月14日 19:46/ 0 赞/ 335 阅读

相关关于上传文件的大小限制

Springboot项目关于上传文件的大小限制 1，第一种处理方式 application.properties中添加 maxFileSize 是单个文件大小

梦里梦外;/ 2021年09月01日 07:00/ 0 赞/ 576 阅读