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

最新推荐文章于 2025-10-10 14:17:41 发布

原创

最新推荐文章于 2025-10-10 14:17:41 发布 · 9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue+spring boot

本文介绍了在Ant Design Vue Pro项目中，使用a-upload组件上传附件到Spring Boot微服务时遇到的跨域问题及解决方案。首先，描述了后台微服务接口设置，然后详细说明了如何在Spring Boot中处理跨域请求。接着，展示前端Vue代码，特别是设置headers为空以避免接口报错的部分。通过这种方式，成功实现了附件上传功能。

使用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",