JS异步文件分片断点上传的实现思路


Posted in Javascript onDecember 25, 2016

在项目中有时会遇到大文件上传,经常会出现链接超时的问题,所以就需要使用文件分片上传的方式来上传大文件。实现原理就是,在前端将文件分成指定大小的“文件块”,分成多次上传,每次上传前先向后台查询已经上传成功的文件的大小,然后从指定的位置切割一块文件,进行上传,后台接收到文件块后追加到指定的文件中。

这篇博客适合有一些后台基础的朋友,或者有后台配合的前端。

这里需要后台提供两个接口,一个上传文件的接口,一个查询已上传文件大小的接口。

JS异步文件分片断点上传的实现思路

前端代码:https://github.com/li5454yong/FileUpload.git

这里放上后台主要代码

package com.fs.controller;import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.FileWriter;
import java.io.IOException;
import java.io.InputStream;
import java.io.RandomAccessFile;
import java.util.Iterator;
import java.util.Map;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.lang3.StringUtils;
import org.csource.ClientGlobal;
import org.csource.common.MyException;
import org.csource.fastdfs.FileInfo;
import org.csource.fastdfs.StorageClient;
import org.csource.fastdfs.TrackerClient;
import org.csource.fastdfs.TrackerServer;
import org.junit.Test;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import redis.clients.jedis.Jedis;
import redis.clients.jedis.JedisShardInfo;
import com.alibaba.fastjson.JSON;
import com.fs.entity.UploadedFileInfo;
import com.fs.util.UploadUtil;
/**
 * @author admin
 *
 * 2016年12月20日下午8:59:38
 */
@Controller
public class FastDFSUpLoadController {
 @Resource
 private UploadUtil uploadUtil;
 @RequestMapping(value = "v1/uploadSize", method = RequestMethod.POST)
 @ResponseBody
 public Long uploadSize(HttpServletRequest request) {
  String name = request.getParameter("name");
  Long size = Long.parseLong(request.getParameter("size"));
  try {
   JedisShardInfo jedisShardInfo = new JedisShardInfo("192.168.0.12");
   Jedis jedis = new Jedis(jedisShardInfo);
   String str = jedis.get(name);
   UploadedFileInfo uploadedFileInfo = null;
   // 如果首次上传,已上传大小为 0
   if (StringUtils.isEmpty(str)) {
    uploadedFileInfo = new UploadedFileInfo();
    jedis.set(name, JSON.toJSONString(uploadedFileInfo));
    jedis.close();
    return 0L;
   }
   uploadedFileInfo = JSON.parseObject(str, UploadedFileInfo.class);
   jedis.close();
   //已经全部上传
   if(size <= uploadedFileInfo.getSize()){
    System.out.println("上传完成");
   }
    //UploadUtil.getFileInfo(uploadedFileInfo.getFileId());
   return uploadedFileInfo.getSize();
  } catch (Exception e) {
   e.printStackTrace();
   return 0L;
  }
 }
 @RequestMapping(value = "v1/uploadFile", method = RequestMethod.POST)
 @ResponseBody
 public int upload(HttpServletRequest request) {
  // CommonsMultipartResolver resolver = new
  // CommonsMultipartResolver(request.getSession().getServletContext());
  MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
  Iterator<String> t = multiRequest.getFileNames();
  MultipartFile fileDetail = multiRequest.getFile(t.next());
  String name = request.getParameter("name");
  JedisShardInfo jedisShardInfo = new JedisShardInfo("192.168.0.12");
  Jedis jedis = new Jedis(jedisShardInfo);
  UploadedFileInfo uploadedFileInfo = JSON.parseObject(jedis.get(name), UploadedFileInfo.class);
  uploadedFileInfo.setFileName(name);
  String path = "d:/testUpload";
  File file = new File(path);
  if (!file.exists() && !file.isDirectory()) {
   boolean b = file.mkdirs();
  }
  RandomAccessFile randomFile = null;
  try {
   randomFile = new RandomAccessFile(path+"/"+name, "rw");
   randomFile.seek(randomFile.length());
   randomFile.write(fileDetail.getBytes());
   uploadedFileInfo.setLocalPath(path+"/"+name);
   uploadedFileInfo.setSize(randomFile.length());
  } catch (IOException e) {
   e.printStackTrace();
  }finally{
   try {
    randomFile.close();
   } catch (IOException e) {
    e.printStackTrace();
   }
  }
  // 将上传文件信息保存到redis
  jedis.set(name, JSON.toJSONString(uploadedFileInfo));
  jedis.close();
  return 0;
 }
}

以上所述是小编给大家介绍的JS异步文件分片断点上传的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
Require.js的基本用法详解
Jul 03 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
BootStrop前端框架入门教程详解
Dec 25 #Javascript
半个小时学json(json传递示例)
Dec 25 #Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 #Javascript
JS如何生成一个不重复的ID的函数
Dec 25 #Javascript
js Canvas实现的日历时钟案例分享
Dec 25 #Javascript
ES6概念 Symbol toString()方法
Dec 25 #Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 #Javascript
You might like
西德产收音机
2021/03/01 无线电
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
php学习笔记之 函数声明(二)
2011/06/09 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
前端必学之PHP语法基础
2016/01/01 PHP
php获取linux命令结果的实例
2017/03/13 PHP
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
Python实现k-means算法
2018/02/23 Python
利用python画出折线图
2018/07/26 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
社区服务标语
2014/07/01 职场文书
五心教育心得体会
2014/09/04 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
如何用python插入独创性声明
2021/03/31 Python
在pyCharm中下载第三方库的方法
2021/04/18 Python
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python
Golang ort 中的sortInts 方法
2022/04/24 Golang