``` 上传组件 <!-- 图片上传组件 action:提交地址；on-preview：预览事件--> <!-- on-remove：处理移除图片事件 --> <!-- heads:请求头信息，上传需要有token值 --> <!-- on-success:监听图片上传成功 --> <!-- multiple：可以上传多个 --> <!-- limit：限制上传个数 --> <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :headers="headsObj" :on-success="handleSuccess" multiple :limit="3" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> <!-- 图片预览对话框 --> <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%"> <img :src="previewPath" width="100%"> </el-dialog> data数据： //添加表单数据 addForm: { goodsname:"", goodsprice:0, goodsweight:0, goodsnum:"", // 商品分类数组 goods_cate: [ ], //上传成功的图片 pics : [ ], //商品详情描述 goods_instroduce :''   }, //请求头获取： // 图片上传组件的请求头对象 headsObj : {Authorization:window.sessionStorage.getItem("token")}, //图片预览保存的url路径 previewPath :'', //图片预览对话框 previewVisible:false, <script> //图片上传成功事件，上传成功，后端返回文件名和临时路径,respone是返回的对象 handleSuccess(respone){ console.log(respone) // 1.拼接一个图片信息对象 // tmp_path为后端返回的临时路径名称 const picinfo = {pic :respone.data.tmp_path} // 2.将图片信息push到pics数组中 this.addForm.pics.push(picinfo)  }, //处理图片移除事件 handleRemove(file){ console.log(file) // 1.获取将要删除的图片临时路径 const filePath = file.response.data.tmp_path // 2.从pics数组中找到这个图片的索引值, //findIndex方法：x代表pics里面的每一项，x的pic等于filePath返回当前的索引 const i =  this.addForm.pics.findIndex(x=>x.pic === filePath) // 3.调用splice方法，把图片对象信息从pics中移除索引为i的一个 this.addForm.pics.splice(i,1) }, //图片预览事件 handlePreview(file){ // 输出的file对象信息有一个tmp_path临时路径名称和一个url地址 console.log(file) //把url地址赋值到本地 this.previewPath = file.response.data.url //打开预览图片的对话框 this.previewVisible = true }, </script> ``` ## 组件属性 ***** on-exceed : 文件超出个数限制时的钩子； ***** on-success(response, file, fileList)：文件上传成功钩子： response：服务器返回的信息 file：文件信息 fileList：当前组件的文件列表信息 *****