Vue + element-ui 上传、移除、预览图片

注意：每次上传图片，都需要为上传的UI组件手动指定headers请求头，同时在请求头对象中绑定authorization字段，因为上传组件并没有调用axios，所以我们需要手动指定headers去获取token

add.vue > 

<!--  -->
<template>
  <div>
    <!-- 面包屑导航区域 -->
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 提示区域 -->
      <!-- 步骤条区域 和tab栏区域共用同一个数据项-activeIndex -->
      <el-steps
        :space="200"
        :active="activeIndex - 0"
        finish-status="success"
        align-center
      >
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- 左侧tab栏区域 通过activeIndex改变进度条位置-->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="100px"
        label-position="top"
      >
        <el-tabs
          v-model="activeIndex"
          :tab-position="'left'"
          :before-leave="beforeTabLeave"
          @tab-click="tabClicked"
        >
          <el-tab-pane label="商品图片" name="3">
            <!-- action表示图片要上传到的后台API地址 list-type表示展示的是标题或是图片-->
            <el-upload
              :action="uploadUrl"
              :on-preview="handlePreview"
              list-type="picture"
              :headers="headerObj"
              :on-success="handleSuccess"
              :on-remove="handleRemove"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="4">商品内容</el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
    <!-- 图片预览 -->
    <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
      <img class="previewImg" :src="previewPath" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import api from '@/utils/api/add.js'
export default {
  name: '',
  data() {
    return {
      activeIndex: 0,
      //添加商品的表单数据对象
      addForm: {
        goods_name: '',
        goods_price: 0,
        goods_weight: 0,
        goods_number: 0,
        //商品所属的分类数组
        goods_cat: [],
        //图片的数组
        pics: [],
      },
      //上传图片的url地址
      uploadUrl: 'http://127.0.0.1:8888/api/private/v1/upload',
      //图片上传组件的headers请求头对象
      headerObj: {
        Authorization: window.sessionStorage.getItem('token'),
      },
      previewPath: '',
      previewVisible: false,
    }
  },
  created() {

  },
  methods: {
    //上传图片成功触发
    handleSuccess(response) {
      //服务器返回data:{tmp_path:} 临时存放路径
      //1.拼接得到一个图片信息对象
      const picInfo = { pic: response.data.tmp_path }
      //2.将图片信息对象push到pics数组中
      this.addForm.pics.push(picInfo)
    },
    //移除图片触发
    handleRemove(file) {
      //1.获取将要删除的图片的临时路径
      const filePath = file.response.data.tmp_path
      //2.从 pics数组中，找到这个图片对应的索引值
      const i = this.addForm.pics.findIndex((item) => item.pic === filePath)
      //3.调用数组的splice方法，把图片信息对象从pics数组中移除
      this.addForm.pics.splice(i, 1)
    },
    //图片预览触发
    handlePreview(file) {
      this.previewPath = file.response.data.url
      this.previewVisible = true
    },
  }
}
</script>

<style lang="less"scoped>
.el-checkbox {
  margin: 0 10px 5px 0 !important;
}
.previewImg {
  width: 100%;
}
</style>