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

本次需求是上传多种固定格式的文件，且回显的时候，图片可以正常显示，文件可以进行下载
主要采用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 =newFormData()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-elseclass="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'){returnfalse}else{returntrue}}else{if(e.name.split('.')[1]==='png'|| e.name.split('.')[1]==='jpeg'|| e.name.split('.')[1]==='jpg'){returnfalse}else{returntrue}}},// 获取详情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 =newBlob([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;}