el-upload上傳和顯示功能彙總

一、上傳檔案附件（可上傳多個檔案，需一個一個點開選擇後上傳）

<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]})
                  }
                }
              })
            },
}
           

上傳附件，隻能實作點選一個檔案，但是可多次上傳檔案。編輯時可檢視檔案名，并實作删除、添加、下載下傳檔案功能。

二、上傳檔案附件（可同時選擇多個檔案上傳）

代碼詳見連結：添加連結描述