前言

本文针对vue新手用户提供一个快速使用示例，大佬请忽略。

Ant Design Vue最新版本到目前为止已经3.x了，1.x的可能是维护的一些老项目，如使用更高版本的Ant Design Vue，建议查看最新官方文档：https://www.antdv.com/components/upload-cn/，不用再继续看下去浪费时间了。

查看版本

查看项目中使用的Ant Design Vue版本，可查看package.json（初次接手前端的后端研发同学，可能不知道这个文件，请查阅相关资料）

前端代码

<template>
  <a-modal
    title="导入信息"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :footer="null"
    :maskClosable="false"
  >
    <a-spin :spinning="confirmLoading">
      <a-spin :spinning="confirmLoading">
        <a-form :form="form">
          <a-form-item
            label="导入"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-upload
              name="file"
              :multiple="false"
              :action="uploadUrl"
              :headers="headers"
              @change="handleChange"
            >
              <a-button>
                <a-icon type="upload" />选择文件
              </a-button>
            </a-upload>
          </a-form-item>
        </a-form>

      </a-spin>
    </a-spin></a-modal>
</template>

<script>

export default {
  name: 'DemoDialog',
  components: {
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      visible: false,
      confirmLoading: false,

      form: this.$form.createForm(this),
      headers: {
        authorization: 'authorization-text'
      },
      uploadUrl: '/upload'
    }
  },
  methods: {
    open () {
      this.visible = true
    },
    handleChange (info) {
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} 上传成功`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败.`)
      }
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>

前端代码主要是打开一个对话框，对话框里可以选择上传文件，核心代码就是<a-upload/>组件部分，如果不需要弹出对话框，可以把其它代码去掉，但是该组件依赖的变量和方法需要保留下来。

效果如下：

上传完成如下：

 

后端代码

@RestController
@RequestMapping("/upload")
public class UploadController {


    @PostMapping
    public Object upload(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return "upload failed: file is empty.";
        }
        String fileName = file.getOriginalFilename();
        // TODO: 文件保存本地等逻辑处理
        
        return "success";
    }
}

 后端接口可以接收到前端页面上传的文件，如何保存处理请自行编写代码。

其它场景

这只是一个基本的可以快速使用的示例，如果有更多场景特定要求，请参照文档的相关属性进行配置：Ant Design Vue