Vue ElementUI 之上传图片

一、使用组件介绍

el-form：表单组件，用于绑定数据
el-upload：上传组件，内置有提交请求方法（但是本demo要求有token验证，因此需要调用demo中自定义的axios请求）
el-dialog：对话框组件，用于显示预览图片

二、实现过程

1. 实现代码

1.1 template 中代码

<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" label-position="top">
  <el-upload action="http://127.0.0.1:8888/api/private/v1/upload"
    :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture"
    :headers="headerObj" :on-success="handleSuccess">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</el-form>

<!-- 图片预览对话框 -->
<el-dialog title="商品图片" :visible.sync="previewDialogVisible"
   width="50%">
   <img :src="fileAbsolutePath" alt="图片" class="previewImg" />
 </el-dialog>

1.2 script中代码

methods: {
	data () {
		return {
			addForm: {
		        pics: []
		    },
			previewDialogVisible: false,
			fileAbsolutePath: '',
			// 商品图片--图片上传请求头headers绑定对象
	      	headerObj: { Authorization: window.sessionStorage.getItem('token') }
	    }
	},
    // 上传图片--图片上传成功
    handleSuccess (response) {
      // 1.拼接图片信息对象
      const picInfo = { pic: response.data.tmp_path }
      // 2.将信息对象push到addForm.pics数组中
      this.addForm.pics.push(picInfo)
    },
	// 上传图片--图片预览
	handlePreview (file) {
      // 获取图片绝对路径--通过绝对路径显示预览图片
      this.fileAbsolutePath = file.response.data.url
      // 显示对话框
      this.previewDialogVisible = true
    },
    // 上传图片--删除图片
    handleRemove (file) {
      // 1.获取将要删除的图片的临时路径，tmp_path为临时路径
      const filePath = file.response.data.tmp_path
      // 2.根据临时路径，从pics数组中找到对应的索引值
      // x：代表数组中的每一项
      const i = this.addForm.pics.findIndex(x => x.pic === filePath)
      // 3.根据索引值，调用splice方法，将图片信息从pics数组中删除
      this.addForm.pics.splice(i, 1)
    }
}

补充：上面的代码中，只是将上传的图片信息保存到了提交表单的数据对象 addForm 中，若是想将上传的图片提交到数据库中，只需要写上提交请求即可，根据自己的项目写请求，如：在“添加按钮”的 click 事件绑定的方法中

const { data: res } = await this.$http.post('goods', addForm)
if (res.meta.status !== 201) {
  return this.$message.error('添加失败')
}

1.3 style 中代码

<style scoped>
  .previewImg{
    width: 100%;
  }
</style>

2. 代码分析

Upload 组件 Attribute

参数	说明	类型
action	必选参数，上传的地址	string
–	–	–
headers	设置上传的请求头部	object
–	–	–
on-preview	点击文件列表中已上传的文件时的钩子	function(file)
–	–	–
on-remove	文件列表移除文件时的钩子	function(file, fileList)
–	–	–
on-success	文件上传成功时的钩子	function(response, file, fileList)

2.1 action

action：上传时请求是后台API接口地址

2.2 headers

设置上传的请求头部

注意：
如果自己写的项目中设置了 token 验证，那么需要在请求头 headers 对象中添加 token

添加操作：在 data 中添加headerObj: { Authorization: window.sessionStorage.getItem('token') }，详见实现代码

2.3 on-preview

点击文件列表中已上传的文件时触发的钩子，可以实现图片预览大图显示
【功能描述】预览图片时，将图片以对话框方式弹出（效果图如下）
【方法实现】通过this.fileAbsolutePath = file.response.data.url获取所选图片的绝对路径

具体路径根据你的代码找，file.response.data.url 是我的代码中的数据，可以在控制台上打印出来找一找

在这里插入图片描述

2.4 on-remove

【分析】删除图片，就i是要将图片信息从提交表单的数据对象中移除掉。要移除对应信息，可以通过图片信息的索引值来移除

首先，获取临时路径

const filePath = file.response.data.tmp_path

其次，通过临时路径字符串比较，找到索引值

const i = this.addForm.pics.findIndex(x => x.pic === filePath)

然后，根据索引值，调用数组删除方法删除该索引对应的数据信息

this.addForm.pics.splice(i, 1)

详见实现代码

2.5 on-success

【分析】上传图片时，upload 组件已经为我们提供了本地图片获取和上传的工作，我们要做的就是将上传图片时产生的临时路径添加到提交表单的数据对象中

详见实现代码注释

【如有错误，欢迎指正~~】

哈！小白要成长！

发布了30 篇原创文章 · 获赞 3 · 访问量 3906

私信关注