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

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


### 紧跟潮流



大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/8f4634e85dd904c95364c9d62e0e9eff.png)