Element-ui upload上传文件限制的解决方法

2024-10-04 09:04:15

问题

在accept中添加上传文件的类型只能起到“表面”作用，选择“所有文件”之后，还是可以上传任何类型的文件，根本起不到限制作用。

解决办法

在before-upload（上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。）钩子里去做判断。这里有一个坑，当你设置了 :auto-upload="false"的时候，这个钩子是不会被触发的，因此也可以在on-change中做判断。

上代码

// :before-upload或者:on-change绑定的方法
beforeUpload(file, fileList) {
   if (file.size / (1024 * 1024) > 500) {  // 限制文件大小
     this.$message.warning(`当前限制文件大小不能大于500M`)
     return false
   }

   let suffix = this.getFileType(file.name) //获取文件后缀名
   let suffixArray = ['jpg', 'png', 'jpeg', 'gif'] //限制的文件类型，根据情况自己定义
   if (suffixArray.indexOf(suffix) === -1) {
     this.$message({
       message: '文件格式错误',
       type: 'error',
       duration: 2000
     })
   }
   return suffixArray
 },
 getFileType(name) {
   let startIndex = name.lastIndexOf('.')
   if (startIndex !== -1) {
     return name.slice(startIndex + 1).toLowerCase()
   } else {
     return ''
   }
 }

到此这篇关于Element-ui upload上传文件限制的解决方法的文章就介绍到这了,更多相关Element upload上传限制内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue-cli3.0+element-ui上传组件el-upload的使用

最近项目中涉及很多文件上传的地方,然后文件上传又有很多限制.比如文件大小限制,文件个数限制,文件类型限制,文件上传后的列表样式自定义,包括上传进度条等问题.下面是我对element-ui的上传组件的一些改造, 点击查看源码. 我是自己维护了一个列表数据,再对这个列表数据进行一些操作,没用组件自带的.先看看我的组件模版 <template> <el-upload class="upload-demo" :limit="limit" :action=&
element-ui中el-upload多文件一次性上传的实现

项目需求是多个文件上传,在一次请求中完成,而ElementUI的上传组件是每个文件发一次上传请求,因此我们借助FormData的格式向后台传文件组 html代码 <div class="upload-file"> <el-upload accept=".xlsx" ref="upload" multiple :limit="5" action="http://xxx.xxx.xxx/personal
用element的upload组件实现多图片上传和压缩的示例代码

我用vuex做状态管理,七牛云做图床. 项目地址:多图片上传组件效果展示项目执行流程首先,让我们来分析一下实现多图片上传的流程: 前端向后端请求用来上传图片至服务器的token 后端为每张要上传的图片生成一个图片名,并用这个图片名生成token 后端将图片名和token返回给前端前端拿到token以后,将图片上传至服务器上传成功以后,前端将图片名发给后端后端将图片名存入数据库项目实现过程 1.我们要利用element-ui的Upload组件布置界面: //upload.vue <e
在vue项目中使用element-ui的Upload上传组件的示例

本文介绍了vue项目中使用element-ui的Upload上传组件的示例,分享给大家,具体如下: <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onError="uploadError" :onSuccess="uploadSuccess&quo
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组件上传附件格式限制方法

如下所示: <el-upload :action="uploadUrl" ref="upload" :multiple="false" :on-change="fileChange" :before-upload="beforeUpload" :on-success="handleAvatarSuccess" :on-preview="file_click" c
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中Upload上传文件前端缓存处理示例

Element-UI对于文件上传组件的功能点着重于文件传递到后台处理,所以要求action为必填属性. 但是如果需要读取本地文件并在前端直接处理,文件就没有必要传递到后台,比如在本地打开一个JSON文件,利用JSON文件在前端进行动态展示等等. 下面就展示一下具体做法: 首先定义一个jsonContent, 我们的目标是将本地选取的文件转换为JSON赋值给jsonContent 然后我们的模板文件是利用el-dialog和el-upload两个组件组合:这里停止文件自动上传模式:auto-upl
VUE 实现element upload上传图片到阿里云

首先安装依赖 cnpm install ali-oss 封装client 若是想减小打包后静态资源大小,可在index.html引入:(然后在client.js里注释掉const OSS = require('ali-oss')) <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script> const OSS = require('ali-oss') expor
Element-ui upload上传文件限制的解决方法

问题在accept中添加上传文件的类型只能起到"表面"作用,选择"所有文件"之后,还是可以上传任何类型的文件,根本起不到限制作用. 解决办法在before-upload(上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传.)钩子里去做判断.这里有一个坑,当你设置了 :auto-upload="false"的时候, 这个钩子是不会被触发的,因此也可以在on-change中做判断.
Asp.net FCKEditor 2.6.3 上传文件没有权限解决方法

打开解决方案, 找到 FileBrowser/FileWorkerBase.cs 文件复制代码代码如下: Response.Write( @"(function(){var d=document.domain;while (true){try{var A=window.top.opener.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\.|$)/,'');if (d.length==0) break;try{document.d
Vue + Element UI图片上传控件使用详解

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

Servlet 3.0之前的版本中,文件上传是个挺让人头疼的问题,虽然有第三方框架来实现,但使用也还是比较麻烦,在Servlet 3.0中,这些问题将不复存在,Servlet 3.0对文件上传提供了直接支持,配合Servlet 3.0中基于Annotations的配置,大大简化上传件的操作. 一.javax.servlet.http中Part接口 public interface Part 要上传文件必须使用multipart/form-data作为request body. 版本: Servl
C#采用HttpWebRequest实现保持会话上传文件到HTTP的方法

本文实例讲述了C#采用HttpWebRequest实现保持会话上传文件到HTTP的方法,在项目开发中有一定的实用价值,具体方法如下: 一.前言: 这篇文章翻译来自madmik3 写在 CodeProject 上的文章,原标题为: C#'s WebClient.UploadFile with more functionality. 二.正文: 我们使用 WebRequest 来获取网页内容是非常简单的,可是用他来上传文件就没有那么简单了. 如果我们在网页中上传文件,加入下面代码即可: HTML 文
yii使用activeFileField控件实现上传文件与图片的方法

本文实例讲述了yii使用activeFileField控件实现上传文件与图片的方法.分享给大家供大家参考,具体如下: yii框架提供了activeFileField控件来完成上传文件(当然也包括了上传图片)的操作,下面介绍yii的activeFileField使用方法. 1.函数原型: 复制代码代码如下: public static string activeFileField(CModel $model, string $attribute, array $htmlOptions=array
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)

php使用ftp实现文件上传代码片段: <?php /** * ftp上传文件类 */ class Ftp { /** * 测试服务器 * * @var array */ private $testServer = array( 'host' => 'ip', 'port' => 21, 'user' => 'userName', 'pwd' => 'password' ); /** * 打开并登录服务器 * * @param string $flag 服务器标识test *
SpringMVC上传文件的两种方法

在该示例中,阐述了SpringMVC如何上传文件. 1.上传页面upload.jsp <body> <form action="/TestSpringMVC3/data/uploadfile" enctype="multipart/form-data" method="post"> file:<input type="file" name="file"><br>
C#检测上传文件真正类型的方法

本文实例讲述了C#检测上传文件真正类型的方法.分享给大家供大家参考.具体分析如下: 对于用户上传的文件如果只是根据扩展名判断,很容易上传上来可执行文件,这是非常危险的,这段代码可以在服务器端检测上传文件的真实类型. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh
JS中使用FormData上传文件、图片的方法

关于FormData XMLHttpRequest Level 2添加了一个新的接口 ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F

Element-ui upload上传文件限制的解决方法

问题

解决办法

相关推荐

随机推荐