ant-design upload 上传图片 请求接口 处理数据

<template>
  <div id="operate-batch">
    <a-spin :spinning="uploading" >
      <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" layout="horizontal">
        <div class="items-wrapper">
          <a-form-item class="inline-item" label="上传文件">
            <a-upload
              class="upload-wrapper"
              name="price"
              accept=""
              @change="handleChange"
              :remove="handleRemove"
              :before-upload="beforeUpload"
            >
              <a-button
                v-if="fileList.length < 1"
              > <a-icon type="upload" /> 上传 </a-button>
            </a-upload>
            <a-button class="download" type="link" @click="handleDownload">下载</a-button>
          </a-form-item>

          <a-form-item :wrapper-col="{ span: 12, offset: 2 }">
            <div class="brn-wrapper">
              <a-button class="btn" type="primary" @click="handleUpload">
                提交
              </a-button>
            </div>
          </a-form-item>
        </div>
      </a-form>
    </a-spin>
  </div>
</template>

<script>
import fetch from '../../fecth.js'

export default {
  name: 'app',
  components: {},
  data () {
    return {
      fileList: [],
      uploading: false,
      formLayout: 'horizontal',
      form: this.$form.createForm(this)
    }
  },
  beforeCreate () {
  },
  methods: {
    handleRemove (file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    handleChange (info) {
      console.log('handleChange >>', info)
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.fileList = info.fileList
        this.$message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    beforeUpload (file) {
      console.log('beforeUpload >>', file)
      this.fileList = [...this.fileList, file]
      return false
    },
    handleUpload () {
      const { fileList } = this
      if (!fileList.length) {
        this.$message.warn('请先上传文件')
        return false
      }
      const formData = new FormData()
      formData.append('type', 1) // 类型
      formData.append('file', fileList[0])
      this.uploading = true
      fetch('/upload', formData, 'post')
        .then(res => {
          this.uploading = false
          console.log('handleUpload >>', res)
          if (res.success) {
            this.info()
          } else {
            this.$message.error(res.message)
          }
        }).catch((err) => {
          console.log('err---->>', err)
          this.uploading = false
          this.$message.error('设置失败，稍后重试')
        })
    },
    handleDownload () {
      // 直接访问接口进行下载
      window.location.href = 'url'
    },
    info () {
      this.$info({
        okText: '确定',
        title: '提示',
        centered: true,
        onOk () {
        }
      })
    }
  }
}
</script>
<style>
html,
body,
#operate-batch {
  min-width: 730px;
  overflow: hidden;
}
.items-wrapper {
  width: 730px;
  margin: 50px auto;
}
.brn-wrapper .btn {
  margin-right: 8px;
}
.inline-item .ant-form-item-children {
  display: inline-flex;
  width: 100%;
}
.inline-item .upload-wrapper {
  flex: 1;
}
.download {
  line-height: 40px;
}
</style>