首页 > 其他分享 >前端实现浏览器端大文件分块上传

前端实现浏览器端大文件分块上传

时间:2023-07-21 17:48:11浏览次数:34  
标签:浏览器 stream 分块 端大 bytes serverFile 编译 源码 file

  上周遇到这样一个问题,客户上传高清视频(1G以上)的时候上传失败。
一开始以为是session过期或者文件大小受系统限制,导致的错误。
查看了系统的配置文件没有看到文件大小限制,
web.xml中seesiontimeout是30,我把它改成了120。
但还是不行,有时候10分钟就崩了。
同事说,可能是客户这里服务器网络波动导致网络连接断开,我觉得有点道理。
但是我在本地测试的时候发觉上传也失败,网络原因排除。
看了日志,错误为:
java.lang.OutOfMemoryError Java heap space
上传文件代码如下:
    public static String uploadSingleFile(String path,MultipartFile file) {
        
        if (!file.isEmpty()) {
            
                byte[] bytes;
                try {
                    bytes = file.getBytes();
                    
                    // Create the file on server
                    File serverFile = createServerFile(path,file.getOriginalFilename());
                    BufferedOutputStream stream = new BufferedOutputStream(
                            new FileOutputStream(serverFile));
                    stream.write(bytes);
                    stream.flush();
                    stream.close();
    
                    logger.info("Server File Location="
                            + serverFile.getAbsolutePath());
 
                    return getRelativePathFromUploadDir(serverFile).replaceAll("\\\\", "/");
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                    System.out.println(e.getMessage());
                }
            
        }else{
            System.out.println("文件内容为空");
        }
        return null;    
    }
乍一看没什么大问题,我在 stream.write(bytes); 这句加了断点,发觉根本就没走到。
而是在 bytes = file.getBytes(); 就报错了。
原因应该是文件太大的话,字节数超过Integer(Bytes[]数组)的最大值,导致的问题。
既然这样,把文件一点点的读进来即可。
修改上传代码如下:
 
   public static String uploadSingleFile(String path,MultipartFile file) {
        
        if (!file.isEmpty()) {
            
                //byte[] bytes;
                try {
                    //bytes = file.getBytes();
                    
                    // Create the file on server
                    File serverFile = createServerFile(path,file.getOriginalFilename());
                    BufferedOutputStream stream = new BufferedOutputStream(
                            new FileOutputStream(serverFile));
                    int length=0;
                    byte[] buffer = new byte[1024];
                    InputStream inputStream = file.getInputStream();
                    while ((length = inputStream.read(buffer)) != -1) {
                        stream.write(buffer, 0, length);
                    }
                    //stream.write(bytes);
                    stream.flush();
                    stream.close();
    
                    logger.info("Server File Location="
                            + serverFile.getAbsolutePath());
 
                    return getRelativePathFromUploadDir(serverFile).replaceAll("\\\\", "/");
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                    System.out.println(e.getMessage());
                }
            
        }else{
            System.out.println("文件内容为空");
        }
        return null;    
    }
    

效果展示:

​编辑

​编辑

​编辑

​编辑

 

视频演示:

windows控件安装,,linux-deb控件包安装,linux-rpm控件包安装,php7测试,php5测试,vue-cli-测试,asp.net-IIS测试,asp.net-阿里云(oss)测试,asp.net-华为云(obs)测试,jsp-springboot测试,ActiveX(x86)源码编译,ActiveX(x64)源码编译,Windows(npapi)源码编译,macOS源码编译,Linux(x86_64)源码编译,Linux(arm)源码编译,Linux(mips-uos)源码编译,Linux(mips-kylin-涉密环境)源码编译,sm4加密传输,压缩传输,

示例下载地址

源代码文档

asp.net源码下载jsp-springboot源码下载jsp-eclipse源码下载jsp-myeclipse源码下载php源码下载csharp-winform源码下载vue-cli源码下载c++源码下载

详细配置信息及思路

 


标签:浏览器,stream,分块,端大,bytes,serverFile,编译,源码,file
From: https://www.cnblogs.com/songsu/p/17572054.html

相关文章

  • 关于项目开发中遇到的难点问题-vue项目中页面需要在浏览器中打开新窗口,但是当关闭新窗
    vue项目中页面需要在浏览器中打开新窗口,但是当关闭新窗口时候,sessionStorage中数据丢失问题。问题描述:项目中A页面有table列表,在列表上方有“导入文件”按钮,点击按钮后需在浏览器新窗口中打开B页面,在B页面进行选择文件上传xlsx数据经过一系列校验后,将最终确定的数据返回回显......
  • B/S实现浏览器端大文件分块上传
    ​ 一、功能性需求与非功能性需求要求操作便利,一次选择多个文件和文件夹进行上传;支持PC端全平台操作系统,Windows,Linux,Mac支持文件和文件夹的批量下载,断点续传。刷新页面后继续传输。关闭浏览器后保留进度信息。支持文件夹批量上传下载,服务器端保留文件夹层级结构,服务器端......
  • WebUploader实现浏览器端大文件分块上传
    ​ 一、概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了。一般断点下载时才用到Range和Content-Range实体头。HTTP协议本身不支持断点上传,需要自己实现。 二、Range  用于请求头......
  • php实现浏览器端大文件分块上传
    ​ 前段时间做视频上传业务,通过网页上传视频到服务器。视频大小小则几十M,大则1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制;2,请求时间过长,请求超时;3,传输中断,必须重新上传导致前功尽弃; 解决方案:1,修改服务端上传的限制配置;Nginx以......
  • csharp实现浏览器端大文件分块上传
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传  可以带参数        [HttpPost("upload")]        publicJsonResultuploadProject(I......
  • SpringCloud实现浏览器端大文件分块上传
    ​ 1.创建SpringBoot项目本项目采用springboot+mybatis-plus+jquery+thymeleaf组成2.项目流程图 ​编辑3.在pom中添加以下依赖12345678910111213141516171819202122232425262728293031<!--lombok依赖-->  <dependency> ......
  • jsp实现浏览器端大文件分块上传
    ​ 对于大文件的处理,无论是用户端还是服务端,如果一次性进行读取发送、接收都是不可取,很容易导致内存问题。所以对于大文件上传,采用切块分段上传,从上传的效率来看,利用多线程并发上传能够达到最大效率。 本文是基于springboot+vue实现的文件上传,本文主要介绍服务端实现文件......
  • 线性代数4 初等变换、初等矩阵、分块矩阵、方阵行列式
    1.1初等变换和初等矩阵的概念初等变换的概念:初等变换并不是一个运算操作,而是一类对矩阵的操作的统称对于m×n矩阵A:(1)倍乘:对A的某行或某列元素乘上一个非零常数k(2)互换:互换A的某两列或某两行元素的位置(3)倍加:将A的某行或某列元素的k倍加到另一行或列上这三种变换统称为初等(行......
  • edge浏览器始终显示收藏夹栏
    步骤在edge浏览器中,点击右上角的三点按钮;打开「设置」;点击左侧的「外观」;把「显示收藏夹栏」设为「始终」。截图......
  • Replit:基于浏览器的云端协同开发平台
    Replit B+轮融资金额9740万美金,由a16zGrowthFund领投,KhoslaVentures,Coatue,SVAngel,YCombinator,BloombergBeta,Angelist创始人NavalRavikant、《7Powers》的作者HamiltonHelmer以及木头姐的ARKVentures等跟投,估值11.6亿美金,比上一轮的8亿美金估......