<template>
  <el-form-item label="图片">
    <el-upload
      action="#"
      :limit="1"
      list-type="picture-card"
      :class="{ hide: hideUploadEdit }"
      :on-change="onChangeFile"
      :on-remove="handleRemove"
      :auto-upload="false"
    >
      <i class="el-icon-plus" />
    </el-upload>
  </el-form-item>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          fileList: []
        },
        formData: new FormData(),
        hideUploadEdit: false
      }
    },
    methods: {
      handleRemove() {
        this.form.fileList = []
        this.hideUploadEdit = false
      },
      onChangeFile(file, fileList) {
        this.form.fileList = this.form.fileList.concat(fileList)
        this.hideUploadEdit = true
      },
      onSubmit() {
        for (const key in this.form.fileList) {
          const element = this.form.fileList[key]

          // file 后台接受的字段名
          // element.raw 文件
          // element.name 文件名
          this.formData.append('file', element.raw, element.name)
        }
      }
    }
  }
</script>

<style>
  .hide .el-upload.el-upload--picture-card {
    display: none !important;
  }
</style>