那些年我们上传的文件
前言:
用了那么多年的电脑,访问了那么多的网站,注册过那么多的账号,发表过那么多帖子,逛了那么多论坛…你有想过一个问题吗?你在上传文件的时候都上传到哪里去了?
百度识图—上传图片
QQ空间–上传视频
查看源码找了一下,差不多就是这个,视频被传到了这个地址上,当然这是一个servlet处理地址;
处理结束后访问的网络地址-----这是封面图地址
http://m.qpic.cn/psc?/3237c5ef-b287-433a-aef8-8d089c2a198e/ruAMsa53pVQWN7FLK88i5tQ*nXXR08.8qgqrdzObu56d8SGR0BNfewynzKJUdIOApeH5oU4OPGqup.PQ9VPVsY7oHFmCa33uwE48CdNOfpk!/mnull&bo=FAc4BAAAAAABBw8!&rf=photolist&t=5
快7000次请求—这是因为传的是一个视频,上传的文件很大,没有任何一个请求参数可以携带这么大的参数,想想如果我们上传10g的电影,那么该参数就会非常大,服务器可以下接收不到这么大的数据,所以只能及逆行拆分,拆分的过程中服务提供商会对数据进行一定的处理;
比如刚刚我只是传了一个30M(本地),上传后经过TX压缩成了17M,站应用空间直接减半;
在请求的过程中数据以二进制数据进行传输,如果数据过大会进行拆分,所以我们在传数据的时候会看到进度条的原理就是因为这个;
那这个过程是怎样实现的呢? 说一个简单点的—上传图片
图片的上传
这里模拟一个注册页面来实现图片的上传,前端简化页面如下
基本思路是这样的 点击上传,然后显示图片缩略图,最后提交将剩余信息一起提交,所以上传时触发的是异步请求;
第一步----前端页面
要知道图片上传到哪里了,就要搞明白上传图片时发生了什么,
<%--
Created by IntelliJ IDEA.
User: Gavin
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js">
</script>
</head>
<body>
<form method="post" action="addPlayer.do">
账号:<input type="text" name="name" id="name" placeholder="请输入账号"/>
<dev>${Info}</dev><!--检查信息-->
<br>
密码:<input type="password" name="pwd" id="pwd" placeholder="请输入密码"/>
<dev>${Info}</dev>
<br>
昵称:<input type="text" name="nickname" placeholder="请输入昵称"><br>
头像:<input type="file" id="upFile">
<a href="javascript:void(0)" id="uploadFile" onclick="uploadPic()">立即上传</a>
<br>
<div id="divimg" style="width: 300px;height: 200px">
<img src="${pageContext.request.contextPath}/static/img/jianjiacangcang.jpeg"/>
</div>
<input type="submit" value="注册"/>
</form>
<script type="text/javascript">
function uploadPic() {
console.log($("#upFile")[0]);
}
</script>
</body>
</html>
前端调试可以看到,传输时是以json格式进行的
由于本次只是上传了一个文件,如果是多个文件还要区分一下,所以取第一个 $("#upFile")[0];
上传时的地址----“C:\fakepath\zjy.jpg”
好了知道了文件源,下面要知道将文件发送给到哪里,
那么我们上传时的文件在哪里呢?
在该前端对象中找到files属性,
由前端调试器可以看到我们传数据的时候其实是被封装为一个file数组,我们上传的数据就在这个数组里,那我们在后台保存数据的数据就要从这个数组里面去取了,由于只有一个文件,这就不去遍历了,直接取出来就好了
$("#upFile")[0].files[0];
如果上传一个别的格式的,这时候file的type显示为application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,我们可以通过这个来限制上传的文件格式;
别的不说,我们现在只追求最简单的一个功能实现,我们在后端只需要将这个对象解析出来就可以保存到相应位置即可;
不过,在解析之前我们先看一下该对象包含哪些属性—
{
"name":
"zjy.jpg",
"webkitRelativePath":"",
"lastModified":"1640314679842",
"size": 167763,
"type":"image/jpeg"
}
根据属性做一些筛选;
<%--
Created by IntelliJ IDEA.
User: Gavin
Date: 2021/12/20
Time: 19:46
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js">
</script>
</head>
<body>
<form method="post" action="addPlayer.do">
账号:<input type="text" name="name" id="name" placeholder="请输入账号"/>
<dev>${Info}</dev><!--检查信息-->
<br>
密码:<input type="password" name="pwd" id="pwd" placeholder="请输入密码"/>
<dev>${Info}</dev>
<br>
昵称:<input type="text" name="nickname" placeholder="请输入昵称"><br>
头像:<input type="file" id="upFile">
<a href="javascript:void(0)" id="uploadFile" onclick="uploadPic()">立即上传</a>
<br>
<div id="divimg" style="width: 300px;height: 200px">
<img src="${pageContext.request.contextPath}/static/img/jianjiacangcang.jpeg"/>
</div>
<input type="submit" value="注册"/>
</form>
<script type="text/javascript">
function uploadPic() {
var photoFile = $("#upFile")[0].files[0];
if (photoFile == undefined) {
alert("请上传文件!");
return;
}
var photoType = $("#upFile")[0].files[0].type;
var photoSize = $("#upFile")[0].files[0].size;
if ("image/jpeg" != photoType) {
alert("请上传图片!!!");
return;
}
if (photoSize > 160000) {
alert("上传图片大小不得高于160K!!!");
return;
}
var photo = null;
}
</script>
</body>
</html>
筛选之后要进行提交了,把数据提交给谁,提交到哪里是接下来要做的事;
将文件包装到FormData对象中
var formData = new FormData();
formData.append("headerPic", photoFile);
$.ajax({
url: "${pageContext.request.contextPath}/fileUpload.do",
data: formData,
type: "post",
processData: false,
contentType: false,
dataType: "json",
success: function (data) {
console.log(data);
}
}
)
}
后端接收数据要用MultipertFile 对象
@Controller
public class FileController {
@RequestMapping("/fileUpload.do")
@ResponseBody
public String upDataPic(MultipartFile headerPic){//用MultipartFile接收数据
return "success";
}
}
但是spring并不能将json对象那个直接转换为 MutipartFile对象
,因此我们需要做一下配置----->>文件上传组件
这个id值必须为这个名字multipartResolver,通过该id找到该对象;
<!-- 配置文件上传组件-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
在配置jar包时遇到了以下小麻烦,具体过程查看以下链接,说不定有你遇到的问题解决思路哦!
链接地址在这里Error creating bean with name ‘multipartResolver
下面就是要做将文件展示在前端页面上,但是这会面临一个问题,服务器随意访问本地磁盘的文件是不太现实的,也不安全,我们需要将上传的文件放到静态资源项目静态资源文件夹下
右键项目静态文件夹,copy path的到静态资源的地址,
然后修改前端jsp和后端上传路径
测试---->>
之后要做的就是美化了----设置图片大小尺寸为固定的大小,就可以了
最后做一下整合,单独建立一个文件夹用于存放上传的图片
后端---->>
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
@Controller
public class FileController {
@RequestMapping("/fileUpload.do")
@ResponseBody
public String upDataPic(MultipartFile headerPic, HttpServletRequest request) throws IOException {//用MultipartFile接收数据
//通过request对象获得绝对路径
ServletContext servletContext = request.getServletContext();
String realPath = servletContext.getRealPath("/uploadPic");
// 指定文件存储目录
//File dir=new File("C:"+File.separator+"imgs");
File dir = new File(realPath);
if (!dir.exists()) {
dir.mkdirs();
}
//获取文件名
String originalFilename = headerPic.getOriginalFilename();
// 文件存储位置
File file = new File(dir, originalFilename);
// 文件保存
headerPic.transferTo(file);
return "success";
}
}
前端—>>
<%@ page contentType="text/html;charset=UTF-8" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js">
</script>
</head>
<body>
<form method="post" action="addPlayer.do">
账号:<input type="text" name="name" id="name" placeholder="请输入账号"/>
<dev>${Info}</dev><!--检查信息-->
<br>
密码:<input type="password" name="pwd" id="pwd" placeholder="请输入密码"/>
<dev>${Info}</dev>
<br>
昵称:<input type="text" name="nickname" placeholder="请输入昵称"><br>
头像:<input type="file" id="upFile">
<a href="javascript:void(0)" id="uploadFile" onclick="uploadPic()">立即上传</a>
<br>
<div id="divimg" style="width: 150px;height: 200px">
<img id="img" src="${pageContext.request.contextPath}/uploadPic/zzy.jpg"/>
</div>
<input type="submit" value="注册"/>
</form>
<script type="text/javascript">
function uploadPic() {
console.log($("#upFile"));
console.log($("#upFile")[0].files[0]);
console.log($("#upFile")[0].files[0].type);
var photoFile = $("#upFile")[0].files[0];
if (photoFile == undefined) { alert("请上传文件!");
return;
}
var photoType = $("#upFile")[0].files[0].type;
var photoSize = $("#upFile")[0].files[0].size;
var photoName= $("#upFile")[0].files[0].name;
if ("image/jpeg" != photoType && "image/png" !=photoType) {
alert("请上传图片!!!");
return;
}
if (photoSize > 1600000) {
alert("上传图片大小不得高于1600K!!!");
return;
}
// $("#img").src="D:\\Program Data\\idea2019Data\\SompleDemo\\myweb2\\target\\myweb2-1.0-SNAPSHOT\\static\\img"+$('#upFile')[0].files[0].name;
var formData = new FormData();
formData.append("headerPic", photoFile);
$.ajax({
url: "${pageContext.request.contextPath}/fileUpload.do",
data: formData,
type: "post",
processData: false,
contentType: false,
// dataType: "json",
success: function (data) {
console.log(data);
window.location.reload();
}
}
)
}
</script>
</body>
</html>
还没结束呢,有很多问题需要解决----比如上传的文件名是一样的,但是文件内容不一样,这样只会存在同名文件中的一个是被替换掉呢还是被覆盖掉?
答案是被覆盖掉
那怎么避免这种情况呢?
前端用户上传我们无法控制,只能上传之后统统改名,这样就不会出现这样重名被覆盖掉的情况;
后端处理----->
使得上传的数据具有唯一性,那么可以通过UUID来实现,
UUID是一个128bit的数值,是基于当前时间、计数器（counter）和硬件标识（通常为无线网卡的MAC地址）等数据计算生成的一个128bit的数;
jdk中已经为我们提供了相应的类去实现这个功能;
UUID的详细API出门左转
简单测试一下
public class TestJson {
public static void main(String[] args){ System.out.println(objectMapper.writeValueAsString(user));
testUUID();
}
public static void testUUID(){
UUID uuid= UUID.randomUUID();
String s = uuid.toString();
System.out.println("UUID:"+s);
String STR="ZZY";
String STR2="ZZY";
byte[] bytes = STR.getBytes();
byte[] bytess = STR2.getBytes();
UUID uuid1 = UUID.nameUUIDFromBytes(bytes);
UUID uuid2= UUID.nameUUIDFromBytes(bytess);
System.out.println(uuid1);
System.out.println(uuid2);
}
}
UUID:993517f1-4467-4d69-b487-a82f4cd5f934
e34775e9-cc05-33b5-8fd9-e075741a4fe7
e34775e9-cc05-33b5-8fd9-e075741a4fe7
可以看到如果调根据名字生成的UUID还是会出现重复,所以只能选择随机生成UUID
后端是这样处理的—>
1,生成一个UUID,
2,获得文件的扩展名
3,将生成的uuid+扩展名拼成一个新文件名
4,多次发送同名文件
@Controller
public class FileController {
@RequestMapping("/fileUpload.do")
@ResponseBody
public String upDataPic(MultipartFile headerPic, HttpServletRequest request) throws IOException {
ServletContext servletContext = request.getServletContext();
String realPath = servletContext.getRealPath("/uploadPic");
//File dir=new File("C:"+File.separator+"imgs");
File dir = new File(realPath);
if (!dir.exists()) {
dir.mkdirs();
}
String originalFilename = headerPic.getOriginalFilename();
String uuid= UUID.randomUUID().toString();
String extendsName = originalFilename.substring(originalFilename.lastIndexOf("."));
String newFileName=uuid.concat(extendsName);
File file = new File(dir, newFileName);
headerPic.transferTo(file);
return "success";
}
}
上传成功!
后端控制文件类型
其实在前端我们也可以控制文件类型,通过获得文件的 type属性来实现提醒,后端则是通过获得扩展名来实现文件的上传控制;
那我们来看前端实现了什么功能?
检查文件类型,并返回信息
这里以一个map对象返回
到这里你会发现之前在前端做判断的话,前端代码很多,容易暴露一些业务逻辑,所以实际工作中将这些判断逻辑放在后端去处理,前端放很少的内容,前端一般是用于展示而非逻辑判断
精简后的前端
<%@ page contentType="text/html;charset=UTF-8" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js">
</script>
</head>
<body>
<form method="post" action="addPlayer.do">
账号:<input type="text" name="name" id="name" placeholder="请输入账号"/>
<dev>${Info}</dev><!--检查信息-->
<br>
密码:<input type="password" name="pwd" id="pwd" placeholder="请输入密码"/>
<dev>${Info}</dev>
<br>
昵称:<input type="text" name="nickname" placeholder="请输入昵称"><br>
头像:<input type="file" id="upFile">
<a href="javascript:void(0)" id="uploadFile" onclick="uploadPic()">立即上传</a>
<br>
<div id="divimg" style="width: 150px;height: 200px">
<img id="img" src="${pageContext.request.contextPath}/uploadPic/zzy.jpg"/>
</div>
<input type="submit" value="注册"/>
</form>
<script type="text/javascript">
function uploadPic() {
var photoFile = $("#upFile")[0].files[0];
var formData = new FormData();
formData.append("headerPic", photoFile);
$.ajax({
url: "${pageContext.request.contextPath}/fileUpload.do",
data: formData,
type: "post",
processData: false,
contentType: false,
// dataType: "json",
success: function (data) {
console.log(data);
alert(data.msg);
window.location.reload();
}
}
)
}
</script>
</body>
</html>
后端----->>
@Controller
public class FileController {
@RequestMapping("/fileUpload.do")
@ResponseBody
public Map<String, String> upDataPic(MultipartFile headerPic, HttpServletRequest request) throws IOException {
Map<String, String> map = new HashMap<>();
//通过request对象获得绝对路径
ServletContext servletContext = request.getServletContext();
String realPath = servletContext.getRealPath("/uploadPic");
// 指定文件存储目录
//File dir=new File("C:"+File.separator+"imgs");
File dir = new File(realPath);
if (!dir.exists()) {
dir.mkdirs();
}
if (headerPic==null){
map.put("msg","请上传图片!");
return map;
}
//获取文件名
String originalFilename = headerPic.getOriginalFilename();
// 控制文件大小
if (headerPic.getSize()>1024*1024*1){
map.put("msg","文件大小不超过1M");
return map;
}
// 避免名字冲突,用UUID替换文件名,但是扩展名不变
String uuid = UUID.randomUUID().toString();
// 获取拓展名
String extendsName = originalFilename.substring(originalFilename.lastIndexOf("."));
if (!(".jpg".equals(extendsName) || ".png".equals(extendsName))) {
map.put("msg", "文件类型不符合要求");
return map;
}
//拼接成新名字
String newFileName = uuid.concat(extendsName);
// 文件存储位置
File file = new File(dir, newFileName);
// 文件保存
headerPic.transferTo(file);
map.put("msg","文件上传成功");
// 返回新生成的文件名
map.put("newFileName",newFileName);
map.put("fileType",headerPic.getContentType());
return map;
}
}
除了在java代码中限制i文件大小,还可以通过配置上传时最大的文件大小来实现这个目的
<!-- 配置文件上传组件-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="1048576"></property>
</bean>
这个配置文件一般是配合后端java代码来更好地约束文件的大小;
为什么不建议单独使用这个配置文件来实现文件大小的约束呢?
首先单独使用这种方式,前端用户无法收到提示信息,其次如果文件大小不符合要求,请求时会出现 500错误
同时后端代码会出现异常
在路径为/myweb2_war_exploded的上下文中，Servlet[myDeparture]的Servlet.service（）引发了具有根本原因的异常Request processing failed; nested exception is org.springframework.web.multipart.MaxUploadSizeExceededException: Maximum upload size of 1048576 bytes exceeded; nested exception is org.apache.commons.fileupload.FileUploadBase$SizeLimitExceededException: the request was rejected because its size (1169635) exceeds the configured maximum (1048576)
org.apache.commons.fileupload.FileUploadBase$SizeLimitExceededException: the request was rejected because its size (1169635) exceeds the configured maximum (1048576)
可以看到QQ在上传文件时会有一个缩略图显示,它是怎么实现的呢?
文件的显示
这个实现起来就就比较简单了,加一个img标签,添加src,不过这个是动态实现的;
后端不需要做修改,只需要将前端收到的文件名塞到img标签下的src属性上
前端代码---->>改动部分
进度条的实现
一直很好奇进度条的实现,代码怎么实现?
用到的工具---------->>
准备材料:
1,准备一个文件
2,通过FormData发送对象----ajax中传输二进制文件的一个de接口;
3,通过jquery中的XmlHttpRequest.upload来监听文件上传进度.,这个方法会返回一个upload对象,
前端页面
准备一个进度条
其实就是两个嵌套的div来实现的
外层div是
<!-- 给进度条君添加一些样式-->
<style>
.progress {
width: 400px;
height: 10px;
border-radius: 10px;
margin: 10px 0px;
overflow: hidden;
}
.progress > div {
width: 0px;
height: 100px;
background-color: yellowgreen;
transition: all .3s ease;
}
</style>
<div class="progress">
<div>
</div>
</div>
然后就要通过异步ajax来实现进度条
function uploadPic() {
var photoFile = $("#upFile")[0].files[0];
var formData = new FormData();
formData.append("headerPic", photoFile);
$.ajax({
url: "${pageContext.request.contextPath}/fileUpload.do",
data: formData,
type: "post",
processData: false,
contentType: false,
// dataType: "json",
success: function (data) {
console.log(data);
alert(data.msg);
$("#img").attr("src", "uploadPic/" + data.newFileName);
//window.location.reload();
},
xhr: function () {
var xhr = new XMLHttpRequest();
//使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
xhr.upload.addEventListener('progress', function (e) {
console.log(e);
//loaded代表上传了多少
//total代表总数为多少
var progressRate = (e.loaded / e.total) * 100 + '%';
$("#divNum").text(progressRate);//显示百分比
//通过设置进度条的宽度达到效果
$('.progress > div').css('width', progressRate);
})
return xhr;//每次监听都返回一个xhr
}
}
);
}
简易效果如下—>
文件的下载
那时候对云盘还没有什么概念,只知道邮箱里有一个中转站,算是早期网盘的雏形;
大约在2014年的时候网盘才浮现在我的视野里,到现在用过好多云盘,360云盘,百度云盘,新浪微盘,阿里云盘,腾讯微盘,现在还活着的…
说远了,关于文件的下载,跟文件的上传是反着来的,可以理解位服务器上传文件到用户计算机;
前端案例---->>
前端展示要下载的内容,用户点击下载就可以下载到本地;
<%--
Created by IntelliJ IDEA.
User: Gavin
Date: 2022/1/8
Time: 14:56
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<style>
#playerTable {
width: 50%;
border: 3px solid cadetblue;
margin: 0px auto;
text-align: center;
}
#playerTable th, td {
border: 1px solid gray;
}
#playerTable img {
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
<script>
// 进入这个页面一上来就加载所有信息
$(function () {
$.ajax({
type: "post",
url: "getAllUser",/*获得所有信息*/
success: function (users) {
$.each(users, function (i, e) {
$("#playerTable").append('<tr>\n' +
' <td>' + e.id + '</td>\n' +
' <td>' + e.name + '</td>\n' +
' <td>' + e.pwd + '</td>\n' +
' <td>' + e.nickname + '</td>\n' +
' <td>\n' +
' <img src="http://192.168.1.2:8090/loadPic/' + e.picname + '" alt="" src>\n' +
' </td>\n' +
' <td>\n' +/*点击下载跳转链接,使得文件发送到用户端*/
' <a href="fileDownload.do?picname='+e.picname+'&filetype='+e.filetype+'">下载</a>\n' +
' </td>\n' +
' </tr>')
})
}
})
})
</script>
</head>
<body>
<table id="playerTable" cellspacing="0xp" cellpadding="0px">
<tr>
<th>编号</th>
<th>账号</th>
<th>密码</th>
<th>昵称</th>
<th>头像</th>
<th>下载</th>
</tr>
</table>
</body>
</html>
在这之前准备的数据库的一些其他改动就省略了;
后端页面
/**
* 文件下载
*
* @param picname 文件名
* @param fileType 文件类型--前端
* @param resp 响应对象
* @throws IOException
*/
@RequestMapping("/fileDownload.do")
public void fileDownLoad(String picname, String fileType, HttpServletResponse resp) throws IOException {
//设置响应头
// 这里如果传过来id则还要到数据库查,不如直接穿过来文件名
// 解析文件名----数据库里没有直接存文件格式,所以要在这里解析文件格式,但是这列格式并非前端识别的格式,所以还是修改之前的在用户表上添加前端文件格式
// 保存数据到磁盘上,不在浏览器上直接解析
resp.setHeader("Content-Disposition", "attachment;filename=" + picname);
resp.setContentType(fileType);
// 获取一个文件输入流
InputStream inputStream = new URL(pic_location+picname).openStream();
// 浏览器获得输出文件
ServletOutputStream outputStream = resp.getOutputStream();
IOUtils.copy(inputStream,outputStream);
}
@RequestMapping("/showUser.do")
public String showUser(){
return "/WEB-INF/serviceData/loginPage/picDown.jsp";
}
整个完整的文上传与下载界面---->>
579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
