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

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

第一种：自动上传

.
当我们设置了action的值，那文件就会默认上传到这个地址。

  action="https://jsonplaceholder.typicode.com/posts/"

<el-upload     
    :ref="upload"    
    action="https://jsonplaceholder.typicode.com/posts/"   // 上传的地址
    multiple  // 是否支持多选文件
    list-type="picture-card"    // 文件列表的类型 text/picture/picture-card
    accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"  // 文件格式的，默认是支持任意格式
    :limit="8"    // 上传文件的个数
    :file-list="imageUrls"  // 上传的文件列表  
    :on-remove="handleRemove"    // 移除文件时的钩子
    :on-exceed="handleExceed"     // 文件超出个数要求后的钩子
    :on-success="uploadSuccess"   // 上传成功的钩子
    :on-error="error"  // 上传失败的钩子
    :before-upload="beforeUpload"  // 上传文件之前的钩子，参数为上传的文件，若返回false或者返回 Promise 且被 reject，则停止上传。
    :before-remove="beforeRemove"  // 删除文件之前的钩子
    >    
    <span><i class="el-icon-plus" style="font-size:14px;"></i> 添加图片</span>
</el-upload>

第二种：手动上传

<el-upload     
    :ref="upload"    
    action="https://jsonplaceholder.typicode.com/posts/"   // 上传的地址
    multiple  // 是否支持多选文件
    list-type="picture-card"    // 文件列表的类型 text/picture/picture-card
    accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"  // 文件格式的，默认是支持任意格式
    :limit="8"    // 上传文件的个数
    :file-list="imageUrls"  // 上传的文件列表  
    :on-remove="handleRemove"    // 移除文件时的钩子
    :on-exceed="handleExceed"     // 文件超出个数要求后的钩子
    :on-success="uploadSuccess"   // 上传成功的钩子
    :on-error="error"  // 上传失败的钩子
    :before-upload="beforeUpload"  // 上传文件之前的钩子，参数为上传的文件，若返回false或者返回 Promise 且被 reject，则停止上传。
    :before-remove="beforeRemove"  // 删除文件之前的钩子
    :auto-upload="false"
    >
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</el-upload>

第三种：自定义上传

<el-upload     
    :ref="upload"    
    action="#"   // 上传的地址
    multiple  // 是否支持多选文件
    :http-request="imgUpload"    // 覆盖默认的上传行为，可以自定义上传的实现
    list-type="picture-card"    // 文件列表的类型 text/picture/picture-card
    accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"  // 文件格式的，默认是支持任意格式
    :limit="8"    // 上传文件的个数
    :file-list="imageUrls"  // 上传的文件列表  
    :on-remove="handleRemove"    // 移除文件时的钩子
    :on-exceed="handleExceed"     // 文件超出个数要求后的钩子
    :on-success="uploadSuccess"   // 上传成功的钩子
    :on-error="error"  // 上传失败的钩子
    :before-upload="beforeUpload"  // 上传文件之前的钩子，参数为上传的文件，若返回false或者返回 Promise 且被 reject，则停止上传。
    :before-remove="beforeRemove"  // 删除文件之前的钩子
    :auto-upload="false"
    >
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</el-upload>

设置自定义上传

// 点击上传
submitUpload() {
        this.$refs.upload.submit();
      }，
// 调上传接口
async imgUpload (info) {
      const { file } = info
      this.file = file
      let formData = new FormData()
      formData.append('file', file)
      // 调用上传接口
      try {
      	// 调上传接口
        const data = await api.uploadImg(formData)
      } catch (error) {
      }
    },

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

下面内容为限制文件格式和大小的操作：
上传组件一般的有以下几点要求：文件格式、大小、数量等。

// 上传前
beforeUpload(file) { 
    var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
   	// 限制上传格式为图片
    // const isIMAGE = file.type === 'image/jpeg'||'image/gif'||'image/png';
    const extension = testmsg === 'xls' ||  'xlsx'
    const isLt2M = file.size / 1024 / 1024 < 10     //这里做文件大小限制  
    if(!extension) {    
        this.$message({    
        message: '上传文件只能是 xls、xlsx格式!',    
        type: 'warning'    
        });  
    }  
    if(!isLt2M) {    
        this.$message({      
        message: '上传文件大小不能超过 10MB!',      
        type: 'warning'     
        });  
    }  
    return extension && isLt2M
}

手动上传：

submitUpload() {
        this.$refs.upload.submit();
      }

上传成功：

   //上传成功
   uploadSuccess(response,file,fileList){
       if(response.code==200){
          //状态码为200时则上传成功 
       }else{
          //状态码不是200时上传失败 从列表中删除
       fileList.splice(fileList.indexOf(file),1);  
       }
   },  

移除文件钩子

 // 移除文件钩子
 handleRemove(file, fileList) {
        console.log(file, fileList);
      },

禁止删除：

   //禁止删除
   beforeRemove(){
   	 return false; 
   },

超过限制数量

 // 超过限制数量
	handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      }

上传失败：

   //上传失败
  	error(response, file, fileList){
         console.log('上传失败')
  	},                                 

以上就是常见的几种上传，如有疑问，请留言!