基于springboot的ajax异步文件上传

电玩女神 2022-03-02 11:22 494阅读 0赞

当我们在页面填写表格或资料的时候，大多数情况下选择文件并点击上传后我们并不会希望页面跳转，而是希望文件异步上传，我们则继续填写表格中的其他内容，今天遇到了这个问题，结合百度，整理出了一种简单的方法进行文件的异步传输。

ajax提交   
这里用到了formData,因为直接提交表单的话会导致页面的跳转，所以使用formData模拟一个表单提交所需要的数据，将其放入ajax的data里即可。

springboot后台接收   
接收文件我们这里使用的是MultipartFile这个类，通过搭配注解写到方法的参数里即可。有一点要注意的是，有些浏览器（如IE）在提交文件后，后台得到的文件名是当时在该浏览器中选择文件时的全路径，这里需要在方法里处理一下，否则保存文件时会报错。

@RequestParam(“file”)中的参数字符串”file”就是前面在dataForm中定义过的，这里就可以用MultipartFile接收此参数对应的文件。

@Controller
    public class UploadController {
    
        @RequestMapping("/upload")
        @ResponseBody
        public String upload(@RequestParam("file") MultipartFile file) {
            String fileName = file.getOriginalFilename();
            if(fileName.indexOf("\\") != -1){
                fileName = fileName.substring(fileName.lastIndexOf("\\"));
            }
            String filePath = "src/main/resources/static/files/";
            File targetFile = new File(filePath);
            if(!targetFile.exists()){
                targetFile.mkdirs();
            }
            FileOutputStream out = null;
            try {
                out = new FileOutputStream(filePath+fileName);
                out.write(file.getBytes());
                out.flush();
                out.close();
            } catch (Exception e) {
                e.printStackTrace();
                return "上传失败";
            }
            return "上传成功!";
        }
    }

综上3步，就完成了文件的异步上传，并且保存在服务器。