Vue中使用 elementUI的upload添加图片，上传图片的方式

渲染组件

 <el-upload
  :action="actionUrl"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :headers="headerObj"
  list-type="picture"
    :on-success="handleSuccess">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

事件处理：

//点击文件列表中已上传的文件时的钩子
   handlePreview(file){
       this.picPreviewPath = file.response.data.url
      this.previewDialogVisible = true
   },
   //文件列表移除文件时的钩子
   handleRemove(file){
  // 1.获取将要删除图片的临时路径
      const filePath = file.response.data.tmp_path
      // 2.从pics数组中，找到图片对应的索引值
      const i = this.formData.pics.findIndex(x => x.pic === filePath)
      // 3.调用splice方法，移除图片信息
      this.formData.splice(i, 1)
   },
   //图片上传成功
handleSuccess(response){
   // 1.拼接得到一个图片信息对象 临时路径
      const picInfo = { pic: response.data.tmp_path }
      // 2.将图片信息对象，push到pics数组中
      this.formData.pics.push(picInfo)
     
}
},

data中需要定义的数据：

 formData:{
      goods_name:'',
      goods_price:0,
      goods_number:0,
      goods_weight:0,
      goods_cat:[],
      pics:[],
    },
    //图片上传组件的请求对象
       headerObj: {
        Authorization: window.sessionStorage.getItem('token')
      },
    // 商品动态参数表
    manyDataList:[],
    //商品静态属性
    onlyTableData:[],
    //图片预览显示
      previewDialogVisible: false,
      //图片预览路径
        picPreviewPath: '',