【vue 项目】el-upload 上传文件以及回显照片和下载文件

script

记得引入

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 = []
		// 调用查询的接口
		...
		...
		// 调用成功
		if (res.code === 200) {
			var arr = []
			// res.data.fileMap为返回的Object格式的文件数据
			// 因为返回的格式是 {name: url,name: url}
			// 循环转变成需要的数组格式，每个数组元素包含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: ''
			   }
			   // 数组元素里面的name就是key
			   obj.name = key
			   // 数组元素里面的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 {
			     // 所有文件统一图片
			     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')// 创建一个a标签通过a标签的点击事件区下载文件
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)// 使用blob创建一个指向类型数组的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)
      })
    },
}

关于type: “application/octet-stream“ 格式的数据并下载主要参考下面这篇文章

https://blog.csdn.net/qq_53145332/article/details/123595850?spm=1001.2014.3001.5506

style

隐藏el-upload上传

// 隐藏上传
::v-deep .el-upload.el-upload--picture-card{
  display: none;
}

// 隐藏右上角绿色标志
::v-deep .el-upload-list__item-status-label{
  display: none !important;
}