springboot2.x 文件上传
1.使用springmvc的API-MultipartFile—(底层其实用的也是java-IO流)展示核心代码块
- @RequestParam Map map 是为了传递其他参数,实际需求中,不光要上传文件,还有可能上传所需要的参数,就会用到了map
@RequestMapping("/uploadFile")
public String uploadFile(@RequestParam("file") MultipartFile file, HttpServletRequest request, @RequestParam Map map) {
//判断文件夹是否存在
File folder = new File( "需要注意的是:这个路径是绝对路径,如果不是,就会报错,系统找不到....");
if (!folder.exists()) {
folder.mkdirs();
}
try {
//直接写入硬盘
file.transferTo( new File( path + file.getOriginalFilename() ) );
//执行保存数据库操作
....map.get(***)
} catch (IOException e) {
e.printStackTrace();
} catch (IllegalStateException e) {
e.printStackTrace();
}
return ResultUtil.success( object, "success", "上传成功" );
}
application配置文件如下
#禁用thymeleaf缓存
spring.thymeleaf.cache=false
#是否支持批量上传(默认值true)
spring.servlet.multipart.enabled=true
#上传文件的临时目录(一般情况下不用特意修改)
spring.servlet.multipart.location=
#上传文件最大为1M(默认值1M根据自身业务自行控制即可)
spring.servlet.multipart.max-file-size=10MB
#上传请求最大为10M(默认值10M根据自身业务自行控制即可)
spring.servlet.multipart.max-request-size=100MB
#文件大小阈值,当大于这个阈值时将写入到磁盘,否则存在内存中,(默认值0一般情况下不用特意修改)
spring.servlet.multipart.file-size-threshold=0
#判断是否要延迟解析文件(相当于懒加载,一般情况下不用特意修改)
spring.servlet.multipart.resolve-lazily=false
前端代码:
<el-upload
style="padding-bottom: 2%"
class="upload-demo"
name="file"
ref="upload"
:on-change="fileChange"
:action="up_load_file_url"
:headers="visitor_headers"
:on-success="voiceSuccessful"
:onError="voiceUploadError"
:file-list="fileList"
:limit="1"
:beforeUpload="voiceUploadFile"
:auto-upload="false"
:show-file-list="false"
:data="getfileData()"
:disabled="forbidden">
<el-button slot="trigger" type="primary" :disabled="forbidden" style="margin-left: 140px;">选取文件
</el-button>
<el-button style="margin-left: 10px;" type="success" @click="voiceSubmitUpload">上传文件</el-button>
</el-upload>
name: file ,需要跟后端代码@RequestParam(“file”)一致
:action:后端地址
:headers=“visitor_headers” : 添加头部信息,实际项目中需要token等.
:data=“getfileData()” :需要上传的参数
//定义方法
getfileData() {
var data= {"robot_id": this.robot_id, "voice_name": this.voice.voice_name}
return data
},
fileChange(file) {
this.voice.voice_name = file.name.split('.')[0]
this.fileName = file.name
},
async voiceSuccessful(response, file, fileList) {
/**
* 上传文件成功
*/
this.dialogUpFile = false//关闭上传文件弹出框
//提示 上传成功。
this.$message({
message: '文件上传成功,已经展示上传数据',
type: 'success'
})
this.$refs.upload.clearFiles();//清除已选的文件
},
voiceUploadError() {
this.$message({
message: '文件上传失败',
type: 'warning'
});
},
voiceUploadFile(file) {
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
const extension = testmsg === 'wav'
const isLt2M = file.size / 1024 / 1024 < 10
if (!extension) {
this.$message({
message: '上传文件只能是wav格式!',
type: 'warning'
});
}
if (!isLt2M) {
this.$message({
message: '上传文件大小不能超过 10MB!',
type: 'warning'
});
}
return extension && isLt2M
},
voiceSubmitUpload() {
this.$refs.upload.submit();
},
遇到过的bug
- 上传文件大小限制
在配置文件里面加上配置就解决了 - 使用transferTo()方法写入File时, 系统找不到指定的路径
改成绝对路径就解决了 - 拒绝访问。
使用FileOutputStream传入的值,必须要有文件名,而不是只到文件夹为止!!!