element上传组件

<template>
  <div class="upload-app-wrapper">
    <el-upload
      class="avatar-uploader"
      ref="upload"
      accept=".jpg, .png, .gif"
      :action="`${origin}${action}`"
      :data="params"
      name="fileKey"
      :headers="headers"
      :before-upload="beforeUpload"
      :on-preview="handlePreview"
      :on-success="handleSuccess"
      :on-error="handleError"
      :show-file-list="false"
      :file-list="fileList"
      >
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      <div slot="tip" class="el-upload__tip">仅支持上传jpg、png、gif格式，尺寸为90px*90px且大小不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
import store from '@/store'
import config from '@/config/index'
const origin = location.origin.indexOf('localhost') > -1 ? 'http://cloud-union.st4.2345.cn' : config.baseApi
export default {
  props: {
    iconUrl: {
      type: String,
    },
  },
  data() {
    return {
      origin,
      action: '/api/admin/ytconfig/task/reflabel/upload',
      headers: {},
      params: {},
      timeFun: null,

      fileList: [],
      imageUrl: '',
    }
  },
  watch: {
    iconUrl: {
      handler(val) {
        this.imageUrl = val
      },
      immediate: true,
    },
  },
  methods: {
    async beforeUpload(file) {

      const suffix = file.name.replace(/.+\./, '').toLowerCase()
      if (!['jpg', 'png', 'gif'].includes(suffix)) {
        this.$message.warning('上传文件只能是 jpg/png/gif 格式!')
        throw new Error('上传文件只能是 jpg/png/gif 格式!')
      }
      const isLt100K = file.size / 1024 < 500
      if (!isLt100K) {
        this.$message.warning('上传文件大小不能超过 500KB!')
        throw new Error('上传文件大小不能超过 500KB!')
      }
      // 限制尺寸（如果不满足90px*90px，则阻塞，满足后，继续往下走）
      await this.getImgWH(file)

      if (this.fileList.length) {
        // 已经有文件的情况，先清除文件，再上传
        this.$refs.upload.clearFiles()
      }
      // token
      this.params.token = store.state.token
    },
    // 获取上传图片的宽和高
    getImgWH(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = (e) => {
          let image = new Image()
          image.src = e.target.result
          image.onload = () => {
            let width = image.width
            let height = image.height
            console.log('图片的宽度为' + image.width + ',长度为' + image.height)
            if (!(+width === 90 && +height === 90)) {
              this.$message.warning('上传文件尺寸不为 90px*90px!')
              reject(new Error('上传文件尺寸不为 90px*90px!'))
            } else {
              resolve()
            }
          }
        }
      })
    },
    handlePreview(file) {
      console.log(file)
    },
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList)
      if (response.status === 0) {
        // this.$message.success('上传应用成功，正在处理请稍后...')
        this.$message.success('上传成功')
        this.imageUrl = response.data && response.data.url
        this.$emit('onSuccess', response.data)
        // this.queryUploadStatus()
      } else {
        this.$message.error(response.message)
        // 上传失败后清除文件
        this.$r