本次需求是上传多种固定格式的文件，且回显的时候，图片可以正常显示，文件可以进行下载
主要采用element的el-upload组件实现

1、文件上传

先看下，上传文件效果图
点击上传将文件放到网页，还有一个点击确定的按钮再上传文件到服务器

html

<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>

1、accept：限制上传的文件类型
2、action: 必选参数，上传的地址，可以暂时设置为"#"
3、multiple: 设置选择文件时可以一次进行多选
4、limit：限制上传的文件的数量
5、auto-upload：是否自动上传，false为手动上传
（因为我需要和表单一起添加到服务器，所以点击上传时只是到页面，后面点击确定才到服务器）
需要注意：当:auto-upload="false"手动上传的时候，:before-upload="beforeUpload"上传前校验失效，两者不可以同时用，可以将校验加在:on-change里面
6、file-list：文件列表

script
记得引入

import axios from 'axios'

data() {	return {		// 上传附件      fileList: [],      headers: {        'Content-Type': 'multipart/form-data'      },	}},methods: {	// 文件状态改变时的钩子	handleChange(file, fileList) { // 文件数量改变      this.fileList = fileList      const isLt2M = (file.size / 1024 / 1024 < 2)      if (!isLt2M) {        this.$message.error('上传头像图片大小不能超过 2MB!')        this.fileList.pop()      }      return isLt2M    },    // 文件超出个数限制时的钩子    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('上传失败')	            }          })    }}

2、文件回显

文件回显时，只展示上传的内容
如果上传图片，直接展示缩略图，可进行放大预览操作
如果上传其他文件，展示固定的图片（图片可自己设置），可在网页进行下载操作

html

<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>

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;}