html input上传文件_springboot2,入门教程,-13-上传文件详解

Spring Boot短短几段代码轻松实现文件上传

1、创建项目learn13,创建项目步骤可以看我往期的文章

5d9ddacf093d5e7df245816ff36fe503.png

2、在pom中添加依赖

cbe8cd6722b5fb98ced0a75133ff7565.png

3、在application.yml中添加配置

56bbec3bbf476629b68f699ac8d6ed84.png

单文件上传超出1M,会报如下错误

e84b2cad21820d4c6f0a3efd838e632a.png

4、在template创建上传页面index.html

00d3ea6bdf28de23811667f12f1a914d.png

5、创建上传controller

创建一个FileUploadController,其中@GetMapping的方法用来跳转index.html页面,而@PostMapping相关方法则是对应的 单文件上传、多文件上传、BASE64编码 三种处理方式。

@RequestParam("file") 此处的"file"对应的就是html 中 name="file" 的 input 标签,而将文件真正写入的还是借助的commons-io中的FileUtils.copyInputStreamToFile(inputStream,file)

a73ddd9e405835d00942e2e6ff136509.png

6、测试,启动项目,在浏览器中输入 http://localhost:3353/learn13/uploads

7d9aabcaa0d0e7487cf20c5151039f0c.png

6.1、单一文件上传

3b519a78fb47ae829936e2fc9733d1f1.png

6.1.1、点击上传,后台console显示

889ea038eac9f327a93aee2638e0bc5a.png

6.1.2、浏览器点击上传后显示

80696e0185a33ad53d10a611f9751549.png

6.1.3、文件夹(D:applearn13)显示

07ebb960f0711aaeb1d1fa8ef677ead2.png

6.2、批量文件上传

51e637587e863b7dde31b8967c016edb.png

6.2.1、点击上传,后台console显示

ba3ebd2c1f3ea138d7536d9d9e8413d8.png

6.2.2、浏览器点击上传后显示

db5233f4c4b25294b65559c9b6ae20ee.png

6.2.3、文件夹(D:applearn13)显示

34f51801dfefe914648ce883a2fedcc9.png

6.3、base64上传文件,将一个图片生成base64编码

0326fc5c4dc43d6f0dda69c6a2595674.png

6.3.1、分别点击异步和同步base64上传,分别显示为请求完成和页面跳转

5ab0aac58d83caa849c3dc575f6c331c.png
15a9a2d3e5f85217ff4e602f4cbfd71e.png

6.3.2、文件夹(D:applearn13)显示

e76e690c4c635e8c9e3cf13abcb2ce56.png

git地址:https://github.com/robot-king/springboot2.git 下learn13

欢迎关注、转发、收藏、评论

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值