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

古城微笑少年丶 2023-02-22 07:43 421阅读 0赞

<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来限制上传文件的个数和定义超出限制时的行为。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]

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

使用 before-upload 限制用户上传的图片格式和大小。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]

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

实现这个功能主要用到element的on-preview钩子函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]

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

主要用到before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false ，则停止删除，不在执行:on-remove="handleRemove"事件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 3]

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

查看和编辑按钮事件如下：  
只需将存入后台的数据再放入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
                   })
               }
           }
       })
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200702110155998.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200702110904853.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200702111157808.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200707111011556.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70