【vue】el-upload 图片上传的封装

 <el-form-item label="产品图片">
            <el-upload
              action="/api/common/uploadImg"
              :headers="requestHeader"
              accept=".png, .jpg, .gif, .jpeg"
              list-type="picture-card"
              :file-list="fileList"
              :on-success="handleSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>

import {  uploadImg } from '@/api/common'
import { getToken } from '@/utils/auth'

data() {
    return {
      requestHeader: { Authorization: getToken() },
      form: {
        product_part_json: [],
      },
		      // 图片
      dialogImageUrl: '',
      dialogVisible: false,
}

computed: {
    fileList() {
      if (this.form.prod_img) {
        return this.form.prod_img.split(',').map((item, key) => {
          return { name: `图片${key + 1}`, url: item }
        })
      }
      return []
    },
  },

// 图片 - 上传成功
    handleSuccess(response, file, fileList) {
      const imgList = fileList.map((item) => {
        if (item.response.code === 200) {
          return item.response.data.data.oss_url
        }
        return ''
      })
      this.form.prod_img = imgList.join(',')
    },
    // 图片 - 删除
    handleRemove(file, fileList) {
      const imgList = fileList.map((item) => {
        if (item.response.code === 200) {
          return item.response.data.data.oss_url
        }
        return ''
      })
      this.form.prod_img = imgList.join(',')
    },
    // 图片 - 浏览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },