前端上传文件夹或文件至后端(SpringBoot)

这篇具有很好参考价值的文章主要介绍了前端上传文件夹或文件至后端(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

效果是这样的
前端上传文件夹或文件至后端(SpringBoot)
有点简陋,但不碍事。

后端

前端把文件夹传给后端后,后端该怎么接收呢?

	@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打开网站后上传了个图片文件成功了,具体原因我也没搞懂。文章来源地址https://www.toymoban.com/news/detail-453481.html

到了这里,关于前端上传文件夹或文件至后端(SpringBoot)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用Git将文件夹上传到Github以及使用Git LFS上传大文件

    使用Git将文件夹上传到Github以及使用Git LFS上传大文件

    2024年04月14日
    浏览(57)
  • 如何上传文件夹到Github(纯小白版)

    已注册Github账号 在Github上已经建立好一个仓库(Repository) 本步骤为Github网页操作 在Github新建的仓库中复制该仓库的地址 本步骤为本地操作 在本地电脑任一位置新建一个空的文件夹(文件夹A) 进入A文件夹,右键选择“Git Bash Here” 在打开的界面输入如下代码: 可能会因为

    2024年02月05日
    浏览(55)
  • el-upload实现上传文件夹

    背景:如图一所示,最下面有一个黄色上传文件按钮,为手动上传而且上传区域有上传文件和上传文件夹的区分 所以需要在点击了上传文件夹做特殊处理使得el-upload可以上传文件夹 01.在拖拽上传的区域绑定一个点击事件 handlePreview ,(注意不要直接绑定在el-upload区域,会被触

    2024年02月07日
    浏览(58)
  • Git中.gitignore的配置(git上传忽略文件/文件夹)

            在实际开发过程中,我们很多项目都需要使用git工具进行代码的拉取和提交等操作。但项目由于环境配置和打包等操作生成了一些不必要上传的文件夹或者一些我们自定义的文件不需要上传,这时候我们需要去配置.gitignore文件。 语法 # 开头为注释行 空行即直接写文

    2024年02月12日
    浏览(62)
  • 使用javaAPI对HDFS进行文件上传,下载,新建文件及文件夹删除,遍历所有文件

    目录 //通过工具类来操作hdfs   hdfs dfs -put d:user_info.txt  /user_info.txt  // 将文件放入到hdfs中  2.通过工具类来操作hdfs   hdfs dfs -get hdfs路径   本地路经  将文件放入到本地Windows中 3.通过工具类来操作hdfs   hdfs dfs -mkdir -p  hdfs路径 4.通过工具类来操作hdfs  查看一个文件是否存在

    2024年02月12日
    浏览(51)
  • 3、HDFS的使用(读写、上传、下载、遍历、查找文件、整个目录拷贝、只拷贝文件、列出文件夹下文件、删除文件及目录、获取文件及文件夹属性等)-java

    1、hadoop3.1.4简单介绍及部署、简单验证 2、HDFS操作 - shell客户端 3、HDFS的使用(读写、上传、下载、遍历、查找文件、整个目录拷贝、只拷贝文件、列出文件夹下文件、删除文件及目录、获取文件及文件夹属性等)-java 4、HDFS-java操作类HDFSUtil及junit测试(HDFS的常见操作以及H

    2024年02月16日
    浏览(61)
  • 关于 华为云:服务器上传文件夹后显示403

    问题原因: 华为云:当前使用的操作系统默认的umask 值是0027 上传文件后出现权限403 的问题: 解决1:修改 /etc/profile 文件 027 = 022 查看是否修改: 指令:umask = 0022 需要删除之前的 文件重新上传, 不要覆盖上传 修改 操作系统默认的umask 权限 但是 不生效-永久解决问题: 参

    2024年02月16日
    浏览(48)
  • git 上传文件夹至远端仓库的方法

    上传的远端git可以是gitlab、github、gitee、gitblit或者gitCode等等 以下以GitHub为例说明: 1、登录GitHub网站(账户/密码) 2、创建一个新的空白项目(或者已有的项目)hello-world 分支是master ,这里默认即可。 任务则是将一个srccode的文件夹上传上去,文件夹内容可以很多,这里模拟

    2024年04月23日
    浏览(54)
  • git本地上传后文件夹不显示绿色成功图标

    当我在gitee创建第一个代码仓库时,将代码托管上去,发现本地文件夹未显示绿色成功图标,但是仓库能成功显示上传的代码文件夹。下面是作者解决此问题的方法及步骤。 (1)首先确保有以下两个软件 去官网自行下载对应的安装包即可 提示:必须先安装git,再安装Tortoi

    2024年02月04日
    浏览(55)
  • Git怎么将文件夹上传至github,全过程

    小白建议参考github文件上传全流程-新手入门系列(超详细!!!) 中间可能会有报错 $ ssh -T git@github.com ssh: connect to host github.com port 22: Connection timed out 这时,参考,如何解决:ssh: connect to host github.com port 22: Connection refused ,即可解决。 正式开始 先在文件夹下面右击运行gi

    2024年01月18日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包