element-uiupload组件上传文件类型限制

需求：
文件上传类型指定accept 后还需要进行指定判断大小或文件类型
在这里插入图片描述但是我们发现原来的已经不能满足我们的需求，这个时候我们需要在文件上传的时候进行判断

在这里插入图片描述代码如下：

 <!-- 图片上传 -->
          <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;
    },

如果要判断文件的大小也是可以的下面注释的是文件的大小判断

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
        }

element-uiupload组件上传文件类型限制

猜你喜欢