ant design vue pro+spring boot使用 a-upload组件上传附件

使用a-upload组件时，将action 修改成自己编写的spring boot微服务，确发现后台服务一直没有调用进来，使用浏览器调试发现了跨域问题，后面再网上找了这段代码，试了OK。

（1）后台微服务接口

@RequestMapping(value = "/api/upload") public UploadRet uploadfile(@RequestParam MultipartFile file) { System.out.println("enter into uploadfile"); UploadRet rt = new UploadRet (); ... System.out.println("execute uploadfile sucess"); return rt; }

 （2）后台解决跨域问题代码，原样复制即可

import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration public class CorsConfig extends WebMvcConfigurerAdapter { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowCredentials(true) .allowedMethods("GET", "POST", "DELETE", "PUT") .maxAge(3600); } }

后面发现虽然可以调用到后台，但是接口报错，网上查资料说vue headers设置为空即可。

（3）前端代码

template部分

              <a-upload name="file" :fileList="fileList" :multiple="false"  action="http://localhost:1234/api/upload " :headers="headers"  :remove="handleRemove" @change="handleChange">                  <a-button>                    <a-icon type="upload" /> 上传附件                  </a-button>                </a-upload> 

script部分 

 export default {   data() {     return {       headers: {},       fileList: []     };

...