Element-uiupload component upload file type limit

Requirements:
After specifying accept for the file upload type, it is necessary to specify the size or file type,
Insert picture description herebut we found that the original file cannot meet our needs. At this time, we need to make a judgment when uploading the file.

Insert picture description herecode show as below:

 <!-- 图片上传 -->
          <el-popover placement="bottom-start" width="450" trigger="click">
            <div style="height:300px;">
              <el-upload
                class="u_img"
                :action="uploadbimg"
                :headers="Myhead"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                 :before-upload="beforeUpload_u"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
                accept=".zip"
              >
                <el-button type="primary">图片压缩包上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传zip格式文件,且不超过800kb</div>
              </el-upload>
            </div>
            <el-button type="primary" slot="reference">图片上传</el-button>
          </el-popover>
          <!-- 图片上传 -->
 beforeUpload_u(file, fileList){
    
    
      
       var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
            const extension = testmsg === 'zip'
          
            var bool = false;
            if(extension){
    
    
              bool = true;
            } else{
    
    
              bool = false;
            }

            if(!extension) {
    
    
              this.$confirm(`上传文件只能是zip格式!`); 
            }
            
            return bool;
    },

If you want to judge the size of the file, it is also possible to note the size of the file.

beforeUpload(file) {
    
    
            console.log(file)
            var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
            const extension = testmsg === 'xls'
            const extension2 = testmsg === 'xlsx'
            // const isLt2M = file.size / 1024 / 1024 < 10
            if(!extension && !extension2) {
    
    
                this.$message({
    
    
                    message: '上传文件只能是 xls、xlsx格式!',
                    type: 'warning'
                });
            }
            // if(!isLt2M) {
    
    
            //     this.$message({
    
    
            //         message: '上传文件大小不能超过 10MB!',
            //         type: 'warning'
            //     });
            // }
            // return (extension || extension2) && isLt2M
            return extension || extension2
        }

Guess you like

Origin blog.csdn.net/milijiangjun/article/details/108381001