1、上传文件的控件

其中:action="uploadURl"的uploadURl是在数据层定义了api接口：

2、这个时候表面上是可以实现上传功能的：

可以看到图片已经显示出来了，但network中显示token无效，这是因为系统中所有接口都必须携带token

而文件上传的接口在前面定义的时候是没有经过axios拦截的

3、这个时候就可以用到el-upload的功能：设置上传的请求头部

这个时候就为文件上传添加了token，就可以完成了请求数据库

4、实现图片上传后我们需要将图片的路径传给商品信息中

需求文档：

将这个图片的临时路径以对象的形式添加到pics数组中

（1）监听上传控件已经成功上传的图片

on-success:文件上传成功时的钩子 function(response, file, fileList)

（2）将上传成功后返回的tmp_path保存到data中

5、实现图片的删除功能

方法：

image.png

6、（1）实现图片的小窗预览on-preview:点击文件列表中已上传的文件时的钩子 function(file)

image.png

image.png

（1）点击已经上传的图片后触发函数：

image.png

（2）使用elementUI中的对话框控件

image.png

previewPath是存储图片的完整地址：

image.png

image.png