1. 引入Upload组件，action属性表示必选参数，上传的地址，也是图片要上传的后台API地址，我们可以给它绑定一个变量uploadUrl。on-preview属性表示点击文件列表中已上传的文件时的钩子，函数传入file。on-remove属性表示 文件列表移除文件时的钩子，函数传入file和fileList。list-type属性是文件列表的类型，是String类型，可以设置picture，传入图片。headers属性是设置上传的请求头部。on-success属性是文件上传成功时的钩子，函数传入response,file和 fileList，代码如下：

    <el-tab-pane label="商品图片" name='3'>
        <el-upload
            :action="uploadUrl"
            :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-tab-pane>

2. 在data中，可以定义之前所需要的数据，定义uploadUrl，图片的上传地址，也就是我们上传的API地址。定义headerObj，设置图片上传组件的headers请求头对象，添加Token验证的Authorization，获取token，代码如下：

     // 上传图片的地址
      uploadUrl: 'http://127.0.0.1:8888/api/private/v1/upload',
      // 设置图片上传组件的headers请求头对象
      headerObj: {
        Authorization: window.sessionStorage.getItem('token')
      },

3. 在methods中，定义handleSuccess方法，监听图片上传成功的事件，在里面传入respons。拼接得到一个图片信息对象，将图片信息对象push到pics数组中，addForm是整个表单对象的值，里面定义pics数组，图片的数组，代码如下：

  // 监听图片上传成功的事件
  handleSuccess (response) {
      // console.log(response)
      // 1. 拼接得到一个图片信息对象
      const picInfo = {pic: response.data.tmp_path}
      // 2. 将图片信息对象品push到pics数组中
      this.addForm.pics.push(picInfo)
      // console.log(this.addForm)
    }

4. 在methods中，定义handleRemove方法，处理图片移除的操作，在函数中传入file参数。第一步，获取将要删除图片的临时路径。第二步，从pics数组中，找到这个图片的对应索引值。第三步，调用数组的splice方法，把图片信息对象从pics数组中移除，代码如下：

   // 处理图片移除的操作
    handleRemove (file) {
      // console.log(file)
      // 获取将要删除图片的临时路径
      const filePath = file.response.data.tmp_path
      // 从pics数组中，找到这个图片的对应索引值
      const i = this.addForm.pics.findIndex(x => x.index === filePath)
      // 调用数组的splice方法，把图片信息对象从pics数组中移除
      this.addForm.pics.splice(i, 1)
    },

5. 在页面当中定义一个dialog，控制图片预览的对话框。title是设置对话框的标题，previewDialogVisible是控制对话框的显示与隐藏，width是设置对话框的宽度。在对话框里面就是预览的图片，图片的地址是动态的，绑定属性previewPath，代码如下：

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

6. 在data中定义previewPath，默认为空，是 图片预览的路径。定义previewDialogVisible，默认为false，控制图片预览对话框的显示与隐藏，代码如下：

      // 图片预览的路径
      previewPath: '',
      // 控制图片预览对话框的显示与隐藏
      previewDialogVisible: false

7. 在methods中，定义handlePreview函数，传入file参数，将响应获得的图片的url赋值给previewPath，这样就可以获得需要预览图片的路径。将previewDialogVisible设置为true，关闭对话框，代码如下：

    // 处理图片预览效果
    handlePreview (file) {
      console.log(file)
      this.previewPath = file.response.data.url
      this.previewDialogVisible = true
    },

8. vue结合Element UI实现Upload组件进行图片上传，实现效果如下：