一、文件上传:
1. 基于Servlet3.0及以上版本
2.定义上传Servlet =》 加入
@MultipartConfig注解
1) 定义该servlet支持文件上传
2) 设置上传的参数
3.只有post方法才能接受文件
使用Part对象操作文件(获取文件名,保存文件。。。)
- 文件上传之上传图片(核心要点)
1.servlet部分
(1)图片上传的Servlet
第一步,使用request.getPart(“文件参数名”)获取到上传的文件,获取其文件后缀,第二步,使用UUID.randomUUID生成文件名称,第三步,使用image.write方法把文件写入指定的磁盘,即下面的(IMAGE_PATH+filename)磁盘路径,最后返回json数据
<1>获取上传的文件
final Part image = request.getPart("image");
// 提取文件后缀名
final String suffix = image.getSubmittedFileName()
.replaceAll(".+(\\.\\w+)", "$1"); // 这是把 .后面的进行切割
// 生成随机文件名
String filename = UUID.randomUUID().toString();
filename = filename.replaceAll("-", ""); // 这是把生成的UUID中的“-”去掉,原因未知
filename += suffix; // 加后缀
<3>把文件写入磁盘
image.write(IMAGE_PATH + filename);
- web页面获取图片资源的Servlet
先通过uri获取文件的地址,然后设置文件的返回类型(Content-Type)通过FileInputStream读取文件把文件内容复制到ServeletOutputSteam(out),即把资源写入给浏览器.
- Vue组件部分,用户头像上传
(1)文件上传之前的钩子函数,:before-upload="beforeAvatarUpload
可以在该函数中判断文件是否为所需的类型,并且限制文件大小,返回值类型为boolean,若返回false则停止文件上传。示例代码如下
beforeAvatarUpload(file) {
//图片类型 : image/jpg image/png
const isIMAGE = file.type.indexOf('image/') > -1;
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isIMAGE) {
console.info(isIMAGE);
this.$message.error('上传头像图片只能是 图片 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
//若返回false 则停止文件上传 return isIMAGE && isLt2M;
},
- 文件上传成功后的钩子函数on-success
文件上传成功之后就会执行action函数,然后on-success指定的函数中的res参数就是action对应的Servlet返回的json参数,即图片的路径为res.data(data为后端设置的json中的参数)
最后通过:src=“该图片的路径”就ok了,该路径也是一个Servlet请求, 图片格式为上述所说的Servlet地址/GetUpload/*
handleAvatarSuccess(res, file) {
// res 是action执行的Servlet返回的数据,不过,此res != axios.res
// res ==> axios.res.data
// res.data ==> webpath
// 注意 / 前面所代表的前缀
// res.data.substring(1); 也可
this.editData.image = "."+res.data;
console.info(this.editData.image);
this.$forceUpdate();
},
图片图片上传的组件
<el-upload
name = "image"
class="avatar-uploader"
action="UploadImageServlet.s"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="editData.image" :src="editData.image" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>