位置: IT常识 - 正文
推荐整理分享前端上传文件夹或文件至后端(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打开网站后上传了个图片文件成功了,具体原因我也没搞懂。
上一篇:【Python】Python寻找多维数组(numpy.array)中最大值的位置(行和列)(python中的查找函数)
下一篇:Google Colab 上部署 Stable Diffusion Web UI(googlelabs)
友情链接: 武汉网站建设