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

 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

 

posted @ 2020-03-06 14:45  奔向太阳的向日葵  阅读(29451)  评论(0)  编辑  收藏  举报