el-upload上传和显示功能汇总

你的名字 2023-07-23 06:55 104阅读 0赞

## 一、上传文件附件（可上传多个文件，需一个一个点开选择后上传） ##

<el-upload
                    class="upload-demo"
                    :headers="headers"
                    action="/admin/sys-file/upload"
                    :on-preview="receipthandlePreview"
                    :on-remove="receipthandleRemove"
                    :before-remove="receiptbeforeRemove"
                    :on-success="receipthandleSuccess"
                    :file-list="receiptFileList">
                    <el-button size="small" type="primary">上传附件</el-button>
                    <div slot="tip" class="el-upload__tip">支持扩展名：.doc .docx .xls .xlsx .pdf</div>
                  </el-upload>
    
    
    
    import store from '@/store'
    data() { 
                return { 
                  headers: { 
                    Authorization: 'Bearer ' + store.getters.access_token
                  },
                  receiptFileList:[],
                  receipt:[],
                  receiptMc:[],
                }
    },
     methods: { 
     			//上传成功赋值事件
               receipthandleSuccess(res, file, fileList){ 
                  this.receiptFileList.push({ name:file.name,url:getFileService()+res.data.bucketName+"/"+res.data.fileName})//用于显示文件列表
                  this.receipt.push(getFileService()+res.data.bucketName+"/"+res.data.fileName)//用于存储文件路径
                  this.receiptMc.push(file.name)//用于存储文件名称，展示时需使用
                },
                //文件移除赋值事件
                receipthandleRemove(file, fileList) { 
                  console.log(file, fileList,this.receipt,this.receiptFileList);
                  for(var i=0;i<this.receiptFileList.length;i++){ 
                    if(this.receiptFileList[i].uid==file.uid){ 
                      this.receiptFileList.splice(i,1)
                      this.receipt.splice(i,1)
                      this.receiptMc.splice(i,1)
                    }
                  }
                },
                //点击文件列表中已上传的文件时的钩子，实现点击下载文件
                receipthandlePreview(file) { 
                  window.open(file.url)
                },
                //移除文件提示
                receiptbeforeRemove(file, fileList) { 
                  return this.$confirm(`确定移除 ${ file.name }？`);
                },
                //保存事件
    			docuManagementSubmit(){ 
                  if(this.receipt.length>0){ 
                    this.confirmPaymentForm.receipt=this.receipt.join(',')
                    this.confirmPaymentForm.receiptMc=this.receiptMc.join(',')
                  }else{ 
                    this.confirmPaymentForm.receipt=''
                    this.confirmPaymentForm.receiptMc=''
                  }
                  saveConfirmationsObj(this.confirmPaymentForm).then(data => { 
                      this.$message.success(''保存成功)
                      this.getList(this.page)
                  })
                },
                //再次点击时，展示之前上传的数据
                docuManagement(row,index){ 
                  var _this=this
                  this.confirmPaymentForm={ }
                  this.receiptFileList=[]
                  this.receipt=[]
                  this.receiptMc=[]
                  getConfirmationsObj(row.id).then(res=>{ 
                    _this.confirmPaymentForm=res.data.data
                    if(_this.confirmPaymentForm.receipt){ 
                      _this.receipt=_this.confirmPaymentForm.receipt.split(',')
                      _this.receiptMc=_this.confirmPaymentForm.receiptMc.split(',')
                      for(var i=0;i<_this.receipt.length;i++){ 
                        _this.receiptFileList.push({ name:_this.receiptMc[i],url:_this.receipt[i]})
                      }
                    }
                  })
                },
    }

![在这里插入图片描述][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]  
上传附件，只能实现点击一个文件，但是可多次上传文件。编辑时可查看文件名，并实现删除、添加、下载文件功能。

## 二、上传文件附件（可同时选择多个文件上传） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]  
代码详见链接：[添加链接描述][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: /images/20230528/78e5e1945f4544b28c21905916351f7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: /images/20230528/a4105f9a16594b31b341790f7f123b9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]: /images/20230528/b3be183a54f44e3c8341e53084d2da4d.png
[Link 1]: https://blog.csdn.net/weixin_44770377/article/details/105228520