另外,springboot是后台接收,前端实现是由前端框架负责,比如vue。
以下是Vue+Springboot实现大文件上传的二种方式:
1、利用ElementUI的el-upload
优点:
简单方便,可以实现功能
缺点:
上传速度太慢,没有分片单线程上传1个G的文件即使在局域网也很慢
上传显示的进度条不准确,进度已经100%了,但是还需要等很久在服务端才生成完文
2、利用百度的webuploader
优点:
WebUploader是网上比较推荐的方式,分片上传大文件速度很快。
缺点:
必须依赖 jquery
不能 import 导入,只能在 index.html 里包含。
3. 利用vue-uploader
vue-uploader 是基于vue的uploader组件,缺省就是分片上传。
通过npm安装,基本流程参考github上的说明即可。
上传的基本原理就是前端根据文件大小,按块大小分成很多块,然后多线程同时上传多个块,同时调用服务端的上传接口,服务端会生成很多小块小块的文件。
所有块都上传完之后,前端再调用一个服务端的merge接口,服务端把前面收到的所有块文件按顺序组合成最终的文件。
java上传可以使用common-fileupload上传组件的。common-fileupload是jakarta项目组开发的一个功能很强大的上传文件组件下面先介绍上传文件到服务器(多文件上传):import javax.servlet.*import javax.servlet.http.*
import java.io.*
import java.util.*
import java.util.regex.*
import org.apache.commons.fileupload.*
public class upload extends HttpServlet {
private static final String CONTENT_TYPE = "text/htmlcharset=GB2312"
//Process the HTTP Post request
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType(CONTENT_TYPE)
PrintWriter out=response.getWriter()
try {
DiskFileUpload fu = new DiskFileUpload()
// 设置允许用户上传文件大小,单位:字节,这里设为2m
fu.setSizeMax(2*1024*1024)
// 设置最多只允许在内存中存储的数据,单位:字节
fu.setSizeThreshold(4096)
// 设置一旦文件大小超过getSizeThreshold()的值时数据存放在硬盘的目录
fu.setRepositoryPath("c:\\windows\\temp")
//开始读取上传信息
List fileItems = fu.parseRequest(request)
// 依次处理每个上传的文件
Iterator iter = fileItems.iterator()//正则匹配,过滤路径取文件名
String regExp=".+\\\\(.+)$"//过滤掉的文件类型
String[] errorType={".exe",".com",".cgi",".asp"}
Pattern p = Pattern.compile(regExp)
while (iter.hasNext()) {
FileItem item = (FileItem)iter.next()
//忽略其他不是文件域的所有表单信息
if (!item.isFormField()) {
String name = item.getName()
long size = item.getSize()
if((name==null||name.equals("")) &&size==0)
continue
Matcher m = p.matcher(name)
boolean result = m.find()
if (result){
for (int temp=0temp if (m.group(1).endsWith(errorType[temp])){
throw new IOException(name+": wrong type")
}
}
try{//保存上传的文件到指定的目录//在下文中上传文件至数据库时,将对这里改写
item.write(new File("d:\\" + m.group(1))) out.print(name+" "+size+"
")
}
catch(Exception e){
out.println(e)
}}
else
{
throw new IOException("fail to upload")
}
}
}
}
catch (IOException e){
out.println(e)
}
catch (FileUploadException e){
out.println(e)
}
}
}
这个组件为前端提供了vue适配 vue-filepond ,为后端提供了Django适配 django-drf-filepond . 二者相互配合,开箱即用,能够实现文件上传的个性化定制。主要包括一下几个方面:
其常规 *** 作流程为
添加文件后, vue-filepond 会自动传给 server.url . 这里后端需要配合实现这个临时文件的存储,并且返回临时文件的ID。
如果后端用了 django-drf-filepond 库的话,上面这个过程就不用自己动手做了,只需要配置一条路由 path('fp/', include('django_drf_filepond.urls')) 即可。同时,这条路由能够跟前端配合,完成临时文件的上传、重传、删除等功能。
常见的场景是,用户将文件跟表单的其它字段一同提交至服务器。在点击确认前, filepond 已经完成了临时文件的上传。所以,点击确认后,服务器只用将硬盘里的临时文件持久化即可,缩短了等待时间,用户体验会更好。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)