前端上传文件到后端（前端上传文件夹或文件至后端（SpringBoot））

前端

前端上传文件夹使用的是input标签的file属性,最重要的是webkitdirectory

这个属性    
    
    
，有了这个属性之后input才可以选择文件夹    


     


     


  ，但也只能选择文件夹了   
    
    
  。

在webkitdirectory的官方文档里有对该属性的说明


     


     


     
。 <input type="file" id="folder" name="file" webkitdirectory multiple />

我们可以在这基础上做延伸




 




 




 
，做一个表单来上传文件夹：

<form action="#" method="POST" enctype="multipart/form-data"> <input id="folder" type="file" name="file" webkitdirectory/> <input type="submit" value="上传文件夹"/> </form>

form要加上enctype=“multipart/form-data   
    
    
  ”   

   

   

，method用的是POST     

     

     

 ，action写的是后端上传方法的接口




  




  




  ，例如：http://localhost:8080/file/upload

效果是这样的

有点简陋
  


  


  


，但不碍事 




 




 




。

后端

前端把文件夹传给后端后     
     
     
，后端该怎么接收呢？

@PostMapping("/qnupload") public String qiniuUpload(HttpServletRequest request) throws IOException { MultipartHttpServletRequest params = ((MultipartHttpServletRequest) request); List<MultipartFile> files = params.getFiles("file"); for (int i=0; i < files.size();i++) { kodeUploadServiceImpl.uploadFiles(files.get(i)); System.out.println("success:" + files.get(i)); } return "complete"; }

HttpServletRequest接收 




   




   




   ，然后将request转型为MultipartHttpServletRequest

 



 



 


，再通过getFiles方法获得List               ，我们就可以对List做遍历来处理每个文件了   

   

   

 。

最后  




    




    




   ，如果想上传文件的话就要在开个form表单















，去掉webkitdirectory属性就好了               ，再加个multiple属性就可以多选了   



     



     



   ，因为理论上用了webkitdirectory属性就不能选择文件了















，但是嗷    
    
    
，我把项目放服务器上测试的时候    


     


     


  ，室友用ipad打开网站后上传了个图片文件成功了




 




 




 
，具体原因我也没搞懂

     

     

     。