1.maven的pom配置如下


    
        org.springframework.boot
        spring-boot-starter
    
    
    
        org.springframework.boot
        spring-boot-starter-web
    

    
        org.springframework.boot
        spring-boot-starter-test
        test
    

    
        com.alibaba
        fastjson
        1.2.39

2.接下来编写上传的API接口

Vue+SpringBoot实现前后端分离的文件上传_上传

记得这个要配置下哦！~！！！！！

接着是java代码啦 

@RestController
@RequestMapping("/upload")
@CrossOrigin
public class UploadController {
    @Value("${prop.upload-folder}")
    private String UPLOAD_FOLDER;
    private Logger logger = LoggerFactory.getLogger(UploadController.class);

    @PostMapping("/singlefile")
    public Object singleFileUpload(MultipartFile file) {
        logger.debug("传入的文件参数：{}", JSON.toJSONString(file, true));
        if (Objects.isNull(file) || file.isEmpty()) {
            logger.error("文件为空");
            return "文件为空，请重新上传";
        }

        try {
            byte[] bytes = file.getBytes();
            Path path = Paths.get(UPLOAD_FOLDER + file.getOriginalFilename());
            //如果没有files文件夹，则创建
            if (!Files.isWritable(path)) {
                Files.createDirectories(Paths.get(UPLOAD_FOLDER));
            }
            //文件写入指定路径
            Files.write(path, bytes);
            logger.debug("文件写入成功...");
            return "文件上传成功";
        } catch (IOException e) {
            e.printStackTrace();
            return "后端异常...";
        }
    }
}

CrossOrigin注解：解决跨域问题，因为前后端完全分离，跨域问题在所难免，加上这个注解会让Controller支持跨域，如果去掉这个注解，前端Ajax请求不会到后端。这只是跨域的一种解决方法，还有其他解决方法这篇文章先不涉及。
MultipartFile：SpringMVC的multipartFile对象，用于接收前端请求传入的FormData。
PostMapping是Spring4.3以后引入的新注解，是为了简化HTTP方法的映射，相当于我们常用的@RequestMapping(value = “/xx”, method = RequestMethod.POST).
后端至此已经做完了，很简单。

 

前端vue代码