upload-button.vue

<template>
  <el-upload
    class="upload-demo"
    :on-change="handleFileChange"
    :http-request="handleClick"
    :on-remove="handleRemove"
    :file-list="fileList.map(o => ({name: 'file', url: o}))"
    list-type="picture"
    :limit="1"
  >
    <Button slot="trigger" size="small">上传</Button>
  </el-upload>
</template>

<script>
export default {
  props: {
    fileList: {
      type: Array,
      default: () => [],
    },
    typeCode: {
      type: String,
      default: '0',
    },
  },
  data() {
    return {
      file: null,
    }
  },
  computed: {
  },
  methods: {
    handleRemove() {
      this.$emit('on-remove')
    },
    handleFileChange(file) {
      this.file = file
    },
    handleClick() {
      if (!this.file) return
      const param = new FormData()
      param.append('file', this.file.raw)
      param.append('typeCode', this.typeCode)
      window.GMS.$http.post(
        `/homepage/uploadImage`,
        param,
        {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
      ).then((res) => {
        const id = res.data && res.data.data && res.data.data[0]
        if (!id) console.log('upload failed')
        else {
          this.$emit('on-success', id)
        }
      })
      return false
    },
  },
}
</script>

<style>

</style>