VUE的Element组件上传文件el-upload详解

在业务场景中，我们经常会接到上传文件的需求，Element的上传组件就做的很完善，今天就用这个组件库来介绍:

上传组件一般的有几点要求：文件格式、大小、数量等。

<el-upload    
    action="''"    
    multiple    
    :http-request="imgUpload"    
    list-type="picture-card"    
    :ref="$upload"    
    accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"    
    :limit="8"    
    :file-list="mItem.imageUrls"    
    :on-remove="handleRemove"    
    :on-exceed="handleExceed"    
    :before-upload="beforeUpload"    
    @submit="submitList"    
    :before-remove="(file, fileList)=>beforeRemove(file, fileList,index,mIndex)">    
    <span><i class="el-icon-plus" style="font-size:14px;"></i> 添加图片</span>
</el-upload>

其中的accept就是用来控制文件格式的，默认是支持任意格式，设置不同的格式类型，就支持什么类型的文件。

action用来绑定文件要上传的地址

multiple控制是否支持多选文件

show-file-list控制是否显示已上传文件列表

on-remove文件列表移除文件时的钩子，可以用来做二次确认

auto-upload控制是否在选取文件后立即进行上传

disabled控制是否禁用

limit控制上传文件的个数

on-exceed文件超出个数要求后的提示钩子

下面内容为限制文件格式和大小的操作：

beforeUpload(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
}

before-upload上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。