1.在form表单中需要设置编码类型
<!--设置编码类型:多部分数据,表单中包含文件数据和控件数据-->
<form action="#" enctype="multipart/form-data">
<input type="file" name="file">
<input type="button" value="开始上传" @click="send()">
</form>
2.必须使用post请求处理上传
//得到表单中的数据
let data = new FormData(document.querySelector("form"));
axios.post("/send",data).then(function (response) {
alert("上传完成!");
}).catch(function (err) {
alert(err);
})
3.java相关代码
//file代表上传的文件对象
//得到上传的文件名
String fileName = file.getOriginalFilename();
System.out.println("文件名:"+fileName);
//得到文件的后缀名 从最后一个.出现的位置 截取到最后
String suffix = fileName.substring(fileName.lastIndexOf("."));
//得到唯一的文件名 UUID.randomUUID()得到一个唯一标识符
fileName = UUID.randomUUID()+suffix;
System.out.println(fileName);
//准备磁盘文件夹路径
String dirPath = "E:/upload";
File dirFile = new File(dirPath);
//判断如果文件夹不存在 创建
if (!dirFile.exists()){
dirFile.mkdirs();//创建文件夹
}
//把上传的文件保存到这个路径下 异常抛出
String filePath = dirPath+"/"+fileName;
file.transferTo(new File(filePath));
System.out.println(filePath);
4.保存在磁盘中的图片是不能直接被客户端访问到的, 需要设置保存图片的路径为静态资源路径
#设置单个文件的大小
spring.servlet.multipart.max-file-size=10MB
#设置多个文件上传时总大小
spring.servlet.multipart.max-request-size=100MB
#设置保存图片文件夹路径为 静态资源路径 后面必须再设置static文件夹
#file代表磁盘路径 classpath代表工程根路径
spring.web.resources.static-locations=file:E:/upload,classpath:static
微博综合练习
create database weibodb character set utf8;
use weibodb;
create table user(id int primary key auto_increment,username varchar(50),password varchar(50),nick varchar(50),url varchar(255))charset=utf8;
create table weibo(id int primary key auto_increment,content varchar(50),author varchar(50),url varchar(255),created timestamp,userid int)charset=utf8;
-
创建工程boot5-2 11改8 3个打钩
-
配置application.properties 把 5-1工程里面所有内容复制过来 , 并且把url中的bootdb改成weibodb
session：
先进入首页点击“登录”(前提是注册、登录已经成功了!) ，确认登录成功后，进入首页点击“发布微博”， 进入发布页面，必须选择图片，点击发布，检查数据库的weibo表是否有以下数据：
任务:
把微博练习5-2 进度赶上之后 , 重新创建一个5-3 从头到尾再实现一遍, 加深影响,没有技术含量的代码可以复制粘贴.