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

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

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

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

参数	说明
action	上传的地址
multiple	是否支持多选文件
http-request	覆盖默认的上传行为，可以自定义上传的实现
list-type	文件列表的类型
accept	文件格式的，默认是支持任意格式
limit	上传文件的个数
file-list	上传的文件列表
on-remove	移除文件时的钩子
on-exceed	文件超出个数要求后的钩子
before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
before-remove	删除文件之前的钩子
submit	手动上传文件列表

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

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
}