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組件上傳文件類型限制