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

Bertha 。 2022-08-29 10:26 425阅读 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 条评论，425人围观）

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

相关阅读

相关 iis上传文件大小限制

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

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

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

报错内容： org.springframework.web.multipart.MaxUploadSizeExceededException: Maximum uplo

野性酷女/ 2023年02月26日 05:26/ 0 赞/ 47 阅读

相关 SpringMVC文件上传修改文件大小限制

\ 坑在学Springboot实战时候，书中说到SpringMVC，提到了文件文件上传，书中用到的正是第一种，结果跑起来各种坑，查阅了不少资料，才理清楚了，顺便记录下。

素颜马尾好姑娘i/ 2023年02月25日 02:08/ 0 赞/ 186 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 springboot 文件上传大小限制

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

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

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

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

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