spring boot + axios 上传文件

背景

纯新手记录一下springboot 上传文件。（以前是做.net 的）

后端实现

• 
  
• FileUtil
  

用来保存文件创建文件夹。

 public static void save (byte[] file,String filePath, String fileName) throws  Exception{
        File targetFile = new File(filePath);
        if(!targetFile.exists()){
            targetFile.mkdirs();
        }
        if(filePath.endsWith(File.separator)){
            filePath=filePath.substring(0,filePath.length()-2);
        }
        FileOutputStream out = new FileOutputStream(filePath+File.separator+fileName);
        out.write(file);
        out.flush();
        out.close();
    }

• 
  
• FileControl
  

用来接收服务器传过来文件

@Controller
@RequestMapping("/${cubeboot.app-file-path}/file")
public class FileController {

    @Autowired
    private CubeBootProperties properties;

    @RequestMapping(value = "/upload",method = RequestMethod.POST)
    @ResponseBody
    public AppResponse upload (@RequestParam("file") MultipartFile file, HttpServletRequest request) throws Exception{
        String contentType = file.getContentType();
        String fileName = file.getOriginalFilename();


        SimpleDateFormat sdf1 = new SimpleDateFormat("yyyyMMhh");
        String profixTime = sdf1.format(new Date());
        String absolutePath=properties.getFileUploadPath()+ File.separator+profixTime;
        String fileExtension= FileUtil.getExtensionNameByName(fileName);
        String randomName= UUID.randomUUID().toString().replace("-","").substring(0,8)+fileExtension;

        FileUtil.save(file.getBytes(),absolutePath,randomName);
        String realtivePath="/upload/"+profixTime+"/"+randomName;
        return new AppResponse(true,realtivePath);
    }
}

• 
  
• WebMvcConfigurerAdapter 复写
  

实现资源指向

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/upload/**").addResourceLocations("file:///"+cubeBootProperties.getFileUploadPath()); //file:///可以指向你你保存文件的任何地址
}

• 
  
• 前端js
  

axios 上传

    change(e) {
      if (e.target.files.length === 0) return
      const file = e.target.files[0]
      const param = new FormData()
      param.append('file', file)

      const config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      axios.post(this.action, param, config).then(e => {       
        // 处理
      })
    }

感想

初来java 真是撞的鼻青脸肿。

广告 ：想学架构的同学看下 直通车