java前后端分离的实现方式_采用前后端分离的方式进行开发,实现了几种常用的文件上传功能...
MyUploader-Backend
单文件上传,多文件上传,大文件上传,断点续传,文件秒传,图片上传
简介
采用前后端分离的方式进行开发,实现了几种常用的文件上传功能。 前端采用 vue.js + plupload + element-ui 实现了文件在浏览器端的发送, 后端采用 spring boot + spring + spring mvc + mybatis 实现了文件在服务器端的接收和存储。
本项目为后端实现
效果图
单文件上传
多文件上传
大文件上传
断点续传
文件秒传
图片上传
后端实现
未分块上传
采用MultipartFile接收上传文件并使用FileOutputStream写入文件
/**
* 写入文件
* @param target
* @param src
* @throws IOException
*/
public static void write(String target, InputStream src) throws IOException {
OutputStream os = new FileOutputStream(target);
byte[] buf = new byte[1024];
int len;
while (-1 != (len = src.read(buf))) {
os.write(buf,0,len);
}
os.flush();
os.close();
}
分块上传
采用MultipartFile接收上传文件的分块文件,上传参数包括:size:文件大小,chunk:分块号,chunks:总分块数
@PostMapping("/")
public void upload(String name,
String md5,
Long size,
Integer chunks,
Integer chunk,
MultipartFile file) throws IOException {
if (chunks != null && chunks != 0) {
fileService.uploadWithBlock(name, md5,size,chunks,chunk,file);
} else {
fileService.upload(name, md5,file);
}
}
分块上传信息的存储
使用Map来存储分块的上传信息,key为文件唯一标识由前端发送这里采用文件MD5作为文件的唯一标识,value为自定义的静态内部类,其中name属性为文件在服务器端存储的随机文件名其在该文件的第一个分块上传到服务器时随机生成(UUID),boolean数组记录了分块的上传情况已上传置为true。
/**
* 分块上传工具类
*/
public class UploadUtils {
/**
* 内部类记录分块上传文件信息
*/
private static class Value {
String name;
boolean[] status;
Value(int n) {
this.name = generateFileName();
this.status = new boolean[n];
}
}
private static Map chunkMap = new HashMap<>();
/**
* 判断文件所有分块是否已上传
* @param key
* @return
*/
public static boolean isUploaded(String key) {
if (isExist(key)) {
for (boolean b : chunkMap.get(key).status) {
if (!b) {
return false;
}
}
return true;
}
return false;
}
/**
* 判断文件是否有分块已上传
* @param key
* @return
*/
private static boolean isExist(String key) {
return chunkMap.containsKey(key);
}
/**
* 为文件添加上传分块记录
* @param key
* @param chunk
*/
public static void addChunk(String key, int chunk) {
chunkMap.get(key).status[chunk] = true;
}
/**
* 从map中删除键为key的键值对
* @param key
*/
public static void removeKey(String key) {
if (isExist(key)) {
chunkMap.remove(key);
}
}
/**
* 获取随机生成的文件名
* @param key
* @param chunks
* @return
*/
public static String getFileName(String key, int chunks) {
if (!isExist(key)) {
synchronized (UploadUtils.class) {
if (!isExist(key)) {
chunkMap.put(key, new Value(chunks));
}
}
}
return chunkMap.get(key).name;
}
}
分块写入文件
使用RandomAccessFile随机读写文件,通过targetSize指定文件的大小,通过seek定位分块在文件中对应位置,通过write方法进行写入。
/**
* 分块写入文件
* @param target
* @param targetSize
* @param src
* @param srcSize
* @param chunks
* @param chunk
* @throws IOException
*/
public static void writeWithBlok(String target, Long targetSize, InputStream src, Long srcSize, Integer chunks, Integer chunk) throws IOException {
RandomAccessFile randomAccessFile = new RandomAccessFile(target,"rw");
randomAccessFile.setLength(targetSize);
if (chunk == chunks - 1) {
randomAccessFile.seek(targetSize - srcSize);
} else {
randomAccessFile.seek(chunk * srcSize);
}
byte[] buf = new byte[1024];
int len;
while (-1 != (len = src.read(buf))) {
randomAccessFile.write(buf,0,len);
}
randomAccessFile.close();
}
分块上传逻辑
每次分块上传时首先获取对应文件在服务器端生成的随机文件名,如果不存在即在这之前还没有分块上传,则创建文件分块存储信息的键值对并存入map中,同时返回刚生成的随机文件名。然后将分块写入文件,同时将boolean数组中当前对应分块的位置置为true。最后判断该文件的所有分块是否全部上传,如果已全部上传完成则将文件信息写入数据库同时删除map中对应的键值对。
ps: 曾用文件夹存储上传分块,当分块全部上传完成时按顺序合并文件夹内所有分块,然后删除文件夹,后来发现RandomAccessFile果断弃坑。
/**
* 分块上传文件
* @param md5
* @param size
* @param chunks
* @param chunk
* @param file
* @throws IOException
*/
public void uploadWithBlock(String name,
String md5,
Long size,
Integer chunks,
Integer chunk,
MultipartFile file) throws IOException {
String fileName = getFileName(md5, chunks);
FileUtils.writeWithBlok(UploadConfig.path + fileName, size, file.getInputStream(), file.getSize(), chunks, chunk);
addChunk(md5,chunk);
if (isUploaded(md5)) {
removeKey(md5);
fileDao.save(new File(name, md5,UploadConfig.path + fileName, new Date()));
}
}
java前后端分离的实现方式_采用前后端分离的方式进行开发,实现了几种常用的文件上传功能...相关推荐
- 3种常用的文件上传方式
第一种,使用formData对象 input的type=file选择文件,返回file对象,封装成formData使用ajax上传,HTML代码如下: <input id="choos ...
- ie6多文件上传_一个好的“文件上传”功能必须要注意的这些点你都知道吗?
检查上传文件扩展名白名单,不属于白名单内,不允许上传:[前端和后端都要做好校验] 上传文件的目录必须是http请求无法直接访问到的.如果需要访问的,必须上传到其他(和web服务器不同的)域名下,并设置 ...
- java批量上传文件_Spring boot 实现单个或批量文件上传功能
一:添加依赖: org.springframework.boot spring-boot-starter-thymeleaf javax.servlet jstl org.apache.tomcat. ...
- 微信小程序开发 - 实现pdf、word等格式文件上传到后端的方法
写在前面 我发现,微信的wx.uploadFile接口限制好多,而且会经常性出现bug,所以今天搜了一上午的资料, 看看能不能不要通过这个接口上传multipart/form-data格式的文件. 后 ...
- UEditor 富文本编辑器-后端实现文件上传功能
一.背景 前端使用 UEditor 富文本编辑器,前后端分离情况下,需要后端提供一个接口实现文件上传功能 本文根据文章:vue+Ueditor集成 [前后端分离项目][图片.文件上传][富文本编辑] ...
- java action 上传文件_Struts2实现单文件或多文件上传功能
一.简述 Struts2的文件上传其实也是通过拦截器来实现的,只是该拦截器定义为默认拦截器了,所以不用自己去手工配置, 二.指定用户上传文件的大小,有两种方式 1)默认是在default.proper ...
- springboot 上传文件解析入库_十五分钟用Spring Boot实现文件上传功能
Spring Boot最好的学习方法就是实战训练,今天我们用很短的时间启动我们第一个Spring Boot应用,并且制作一个文件上传系统, 用户可以将本地文件上传到服务器上.我将假设读者为几乎零基础, ...
- java struts2上传文件_java Struts2框架下实现文件上传功能
本文实例为大家分享了struts2框架实现文件上传的方法,供大家参考,具体内容如下 struts2的配置过程 (1)在项目中加入jar包 (2)web.xml中filter(过滤器)的配置 xmlns ...
- 前后端分离跨服务器文件上传,SpringBoot+Vue.js实现前后端分离的文件上传功能
这篇文章需要一定vue和springboot的知识,分为两个项目,一个是前端vue项目,一个是后端springboot项目. 后端项目搭建 我使用的是springboot1.5.10+jdk8+ide ...
最新文章
- 产品经理经验谈50篇(二):如何写好一份规范的数据分析报告?我想你需要知道这些
- [JAVA基础] 简单又不简单的数组
- 牛客 - 数位操作2(数位dp)
- 网络机房利用()将多台计算机,2020现代教育技术章测试答案.doc
- linux消息队列消息清空函数,ipcrm命令_Linux ipcrm 命令用法详解:删除消息队列、信号集、或者共享内存标识...
- c语言中cnthe普通变量,不得不说,关于 *(unsigned long *) 和 (unsigned long)
- mysql 安装是否成功,启动,查看配置文件,连接
- WordPress 简约主题 NDNAV 网址导航网站模版
- ESP32 开发笔记(三)源码示例 12_IR_Rev_RMT 使用RMT实现红外遥控接收解码(NEC编码)
- 四川行无疆电商讲解拼多多电商产品销量如何清零
- maven profile <filtering>true</filtering>的作用
- Ubuntu中禁用触摸板
- DRB-GAN: A Dynamic ResBlock Generative Adversarial Network for Artistic Style Transfer
- python识别二维码条形码?用pyzbar一招搞掂(含代码)!
- 【数字华容道】一、核心
- 猴子也能学会的jQuery第七期——jQuery动画(上)
- 隆重纪念鲁宾逊诞辰,不走样,不离谱
- BlockingQueue队列有哪些
- 自动驾驶专题介绍 ———— 超声波雷达
- AngularJs - Javascript MVC 框架
热门文章
- RenderMonkey基本使用方法
- Java中List.remove报UnsupportedOperationException异常
- 项目pom.xml第一行报错解决方案
- oracle账户锁定解决方法
- Windows魔法堂:解决“由于启动计算机时出现页面文件配置问题.......”
- 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题
- 如何更改Twitter Bootstrap模式框的默认宽度?
- 要求用户提供输入,直到他们给出有效的答复
- 获取jQuery中的复选框值
- PYTHON高级全栈开发工程师-老男孩教育