element-ui upload组件上传文件类型限制

本文转载自查看原文 2020-03-06 14:45 24409 vue

 1 <el-upload                
 2     class="c-upload"                
 3     ref="upload"                
 4     :action="actions"                
 5     :headers="myHeaders"                
 6     :data="myData"                
 7     :limit='limit'                
 8     accept=".xls,.xlsx"                
 9     :on-exceed="onExceed"                
10     :on-change="onChange"                
11     :on-success="onSuccess"                
12     :on-error="onError"                
13     :file-list="fileList"                
14     :before-upload="beforeUpload"                
15     :auto-upload="false"            
16 >               
17     <el-button                        
18     　　slot="trigger"                    
19     　　size="small"                    
20     　　type="primary"               
21   　>选取文件</el-button>                
22   　<div                    
23        slot="tip"                    
24        class="el-upload__tip"               
25     >只能上传xls/xlsx文件，且不超过一个</div>           
26 </el-upload>

解决办法：

上传之前:before-upload="beforeUpload"再次判断文件类型

 1 beforeUpload(file) {           
 2      console.log(file)           
 3      var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)                        
 4      const extension = testmsg === 'xls'            
 5      const extension2 = testmsg === 'xlsx'           
 6      // const isLt2M = file.size / 1024 / 1024 < 10            
 7     if(!extension && !extension2) {                
 8         this.$message({                    
 9             message: '上传文件只能是 xls、xlsx格式!',                    
10             type: 'warning'               
11         });            
12     }            
13     // if(!isLt2M) {           
14     //     this.$message({           
15     //         message: '上传文件大小不能超过 10MB!',            
16     //         type: 'warning'            
17     //     });           
18     // }            
19     // return extension || extension2 && isLt2M            
20     return extension || extension2        
21 },
22 ————————————————
23 版权声明：本文为CSDN博主「为什么名字都被占用」的原创文章，遵循CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
24 原文链接：https://blog.csdn.net/qq_37588752/article/details/89637283

View Code

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 element-ui upload组件多文件上传 vue ----element-ui 文件上传upload 组件实现及其后台 Vue 之 element-ui upload组件的文件类型 element-ui upload组件上传 element-ui文件上传做类型大小的限制 element-ui中上传文件upload element-ui upload组件上传图片时限制图片宽高 Element-ui upload上传组件的具体使用 element-ui upload组件的http-request自定义上传文件 vue element-ui el-upload组件多选文件上传改造

element-ui upload组件 上传文件类型限制

免责声明！

element-ui upload组件上传文件类型限制