el-upload组件说明汇总，实现上传、点击下载、删除功能等

<el-upload
	  class="upload-demo"
	  action="/admin/sys-file/upload"      //文件上传路径
	  :headers="headers"       //请求头配置信息
	  :file-list="fileList"         //上传的文件显示列表, 格式如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
	  :limit="5"          //设置最大允许上传个数
 	  :on-exceed="handleExceed"   //文件超出个数限制时的钩子
	   accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx"    //接受上传的文件类型
	  :before-upload="beforeUpload"   //上传文件之前的钩子,判断文件大小和格式是否符合
      :before-remove="beforeRemove"   //删除文件之前的钩子,若返回 false 或者返回 Promise 且被 reject，则停止删除停止执行handleRemove事件
	  :on-remove="handleRemove"   //文件列表移除文件时的钩子
	  :on-preview="handlePreview"    //点击文件列表中已上传的文件时的钩子
	  :on-success="handleSuccess">
	  <el-button size="small" type="primary">上传文件</el-button>
	  <div slot="tip" class="el-upload__tip">最多可上传5个，文件大小不超过50MB</div>
</el-upload>


import store from '@/store'
data() {
   return {
   		fileList:[],
        headers: {
            Authorization: 'Bearer ' + store.getters.access_token,
            'TENANT-ID': '1564020210'
        }
},
methods: {
	//点击文件列表中已上传文件进行下载
    handlePreview(file) {
      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.download = file.name;
      a.href = file.url;
      a.dispatchEvent(event);
      console.log(file)
    },
	//上传文件大小和格式校验
    beforeUpload(file){
        var fileType =file.name.substring(file.name.lastIndexOf('.')+1)
        const isFile =
            fileType === "doc" ||
            fileType === "docx" ||
            fileType === "xls" ||
            fileType === "xlsx" ||
            fileType === "ppt" ||
            fileType === "pptx"
        if (!isFile) {
            this.$message.error("请选择正确的文件格式")
            return false
        }
        
        const isLt50M = file.size / 1024 / 1024 < 50
        if (!isLt50M) {
            this.$message.error("上传图片大小不能超过 50MB!")
        }
        return isLt50M && isFile
    },
    
    //文件超出限制个数提示
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
      
    //上传成功
    handleSuccess(res, file, fileList){
        let fileSize=res.data.fileSize/1024/1024
        this.fileList.push({
            name: file.name,
            fileSize:fileSize,
            url:  res.data.bucketName + '/' + res.data.fileName
        })
        console.info(fileList,"fileList")
    },     
    
    //文件移除操作
    beforeRemove(file, fileList) {
      if(this.status=='view'){
        this.$message.warning('不允许删除！')
        return false
      }else{
        return true
      }
    },
    //文件移除操作
    handleRemove(file, fileList){
        this.fileList=fileList
    },     
    
    //点击文件列表中已上传文件进行下载
    handlePreview(file) {
      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.download = file.name;
      a.href = file.url;
      a.dispatchEvent(event);
      console.log(file)
    },
}

一、限制上传文件个数

可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。

二、 限制上传的图片格式和大小

使用 before-upload 限制用户上传的图片格式和大小。

三、点击已上传文件进行下载

实现这个功能主要用到element的on-preview钩子函数

四、查看时，不允许删除文件

主要用到before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false ，则停止删除，不在执行:on-remove="handleRemove"事件。

五、查看编辑显示后台保存已上传文件

查看和编辑按钮事件如下：
只需将存入后台的数据再放入this.fileList数组中即可。

rowEditForm(row, index){
    this.fileList=[]
	getFileList(row.id).then(res=>{
      var data= res.data.data
       if(data!=null&&data.length>0){
           for(var i=0;i<data.length;i++){
               this.fileList.push({
                   name: data[i].name,
                   fileSize:data[i].fileSize,
                   url:  data[i].url
               })
           }
       }
   })
}

原文连接: https://blog.csdn.net/weixin_44770377/article/details/107078454