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吗?
Feb 24 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
浅谈javascript中的闭包
May 13 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
原生js实现分页效果
Sep 23 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
ES6中的类(Class)示例详解
Dec 09 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
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
python读取注册表中值的方法
2013/04/08 Python
Python回调函数用法实例详解
2015/07/02 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
简单的Python调度器Schedule详解
2019/08/30 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
AURALog面试题软件测试方面
2013/10/22 面试题
食品安全演讲稿
2014/09/01 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
家长对孩子的寄语
2015/02/26 职场文书
个人廉政承诺书
2015/04/28 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
mysql 索引合并的使用
2021/08/30 MySQL