<el-upload
   ref="upload"
   accept=".png,.jpg,.jpeg,.doc,.docx,.txt,.xls,.xlsx"
   action="#"
   multiple
   :limit="5"
   :headers="headers"
   :auto-upload="false"
   :file-list="fileList"
   :on-change="handleChange"
   :on-remove="removeFile"
   :on-exceed="limitCheck"
 >
   <el-button size="small" type="primary">點擊上傳</el-button>
   <div slot="tip" class="el-upload__tip">
     <p>只支持.png / .jpg / .jpeg / .doc / .docx / .txt / .xls / .xlsx文件</p>
     <p>最多上傳5個文件</p>
   </div>
 </el-upload>

import axios from 'axios'

data() {
	return {
		// 上傳附件
      fileList: [],
      headers: {
        'Content-Type': 'multipart/form-data'
      },
	}
},
methods: {
	// 文件狀態(tài)改變時的鉤子
	handleChange(file, fileList) { // 文件數(shù)量改變
      this.fileList = fileList
      const isLt2M = (file.size / 1024 / 1024 < 2)
      if (!isLt2M) {
        this.$message.error('上傳頭像圖片大小不能超過 2MB!')
        this.fileList.pop()
      }
      return isLt2M
    },
    // 文件超出個數(shù)限制時的鉤子
    limitCheck() {
      this.$message.warning('每次上傳限制最多五個文件')
    },
    // 文件刪除的鉤子
    removeFile(file, fileList) {
      this.fileList = fileList
    },
    // 點擊確定按鈕 上傳文件
    confirm() {
    	var param = new FormData()
    	this.fileList.forEach((val, index) => {
    		param.append('file', val.raw)
    	})
    	// 拿取其他的信息
    	param.append('id', sessionStorage.getItem('id'))
    	...
    	axios(`url......`, {
   			headers: {
              'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
              'Content-Type': 'multipart/form-data'
            },
            method: 'post',
            data: param
          	}).then((res) => {
	            if (res.data.code === 200) {
	              this.$message.success('上傳成功')
	            } else {
	              this.$message.error('上傳失敗')
	            }
          })
    }
}

<el-upload
   :file-list="fileList"
   action="#"
   list-type="picture-card"
 >
   <div slot="file" slot-scope="{file}">
     <img
       class="el-upload-list__item-thumbnail"
       :src="file.url"
       alt=""
     >
     <span class="el-upload-list__item-actions">
     	// 下載
       <span
         v-if="updataIf(file)"
         class="el-upload-list__item-delete"
         @click="handleDownload(file)"
       >
         <i class="el-icon-download" />
       </span>
       // 放大預覽
       <span
         v-else
         class="el-upload-list__item-preview"
         @click="handlePictureCardPreview(file)"
       >
         <i class="el-icon-zoom-in" />
       </span>
     </span>
   </div>
 </el-upload>
 <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
   <img width="100%" height="100%" :src="dialogImageUrl" alt="">
 </el-dialog>

import axios from 'axios'

data() {
	return {
		dialogImageUrl: '',
	    dialogVisible: false,
	    fileList: []
	}
},
created() {
	this.getDetail()
},
methods: {
	// 判斷文件類型,圖片預覽，文件下載
    updataIf(e) {
      if (e.fileName) {
        if (e.fileName.split('.')[1] === 'png' || e.fileName.split('.')[1] === 'jpeg' || e.fileName.split('.')[1] === 'jpg') {
          return false
        } else {
          return true
        }
      } else {
        if (e.name.split('.')[1] === 'png' || e.name.split('.')[1] === 'jpeg' || e.name.split('.')[1] === 'jpg') {
          return false
        } else {
          return true
        }
      }
    },
	// 獲取詳情
	getDetail() {
		this.fileList = []
		// 調(diào)用查詢的接口
		...
		...
		// 調(diào)用成功
		if (res.code === 200) {
			var arr = []
			// res.data.fileMap為返回的Object格式的文件數(shù)據(jù)
			// 因為返回的格式是 {name: url,name: url}
			// 循環(huán)轉(zhuǎn)變成需要的數(shù)組格式，每個數(shù)組元素包含name、url、id
			// [{name: name,url: ulr,id: id},{name: name,url: ulr,id: id}]
			Object.keys(res.data.fileMap).forEach(key => {
			   var obj = {
			     name: '',
			     url: '',
			     id: ''
			   }
			   // 數(shù)組元素里面的name就是key
			   obj.name = key
			   // 數(shù)組元素里面的url,當時圖片的時候直接用url
			   // 當不為圖片的時候,顯示固定的圖片，且傳入id(id用于下載文件)
			   if (key.split('.')[1] === 'png' || key.split('.')[1] === 'jpeg' || key.split('.')[1] === 'jpg') {
			     obj.url = 'http://.../file/minio/view/chs/' + res.data.fileMap[key]
			   } else {
			     // 所有文件統(tǒng)一圖片
			     obj.url = require('../../../assets/images/fileImg.png')
			     obj.id = res.data.fileMap[key]
			   }
			   arr.push(obj)
			 })
			 // 將組好的格式直接賦值給fileList（文件列表）
			 this.fileList = arr
		} 
	},
	// 放大預覽
	handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 文件下載
    handleDownload(file) {
      axios(`url.......`, {
        headers: {
          'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
          'Content-Type': 'application/octet-stream'
        },
        methods: 'get',
        params: {
          id: file.id
        },
        responseType: 'blob'
      }).then((res) => {
        if (res.status === 200) {
          const content = res.data
          const blob = new Blob([content])
          const fileName = file.name
          if ('download' in document.createElement('a')) { // 非IE下載
            const elink = document.createElement('a')// 創(chuàng)建一個a標簽通過a標簽的點擊事件區(qū)下載文件
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)// 使用blob創(chuàng)建一個指向類型數(shù)組的URL
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 釋放URL 對象
            document.body.removeChild(elink)
          } else { // IE10+下載
            navigator.msSaveBlob(blob, fileName)
          }
        }
      }).catch(res => {
        console.log(res)
      })
    },
}

// 隱藏上傳
::v-deep .el-upload.el-upload--picture-card{
  display: none;
}
// 隱藏右上角綠色標志
::v-deep .el-upload-list__item-status-label{
  display: none !important;
}