首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用(event.target as FileReader).result上传较大文件时,谷歌chrome崩溃。(文件大小大于80mb)

当使用(event.target as FileReader).result上传较大文件时,谷歌Chrome崩溃的问题可能是由于浏览器内存不足导致的。上传大文件时,浏览器需要将文件数据存储在内存中进行处理,而Chrome浏览器对于单个网页的内存限制是有限的。

为了解决这个问题,有几个可能的解决方案:

  1. 使用分片上传:将大文件切割成小块进行分片上传。这样可以减轻单个上传请求的负担,并且可以通过多个并行上传请求提高上传速度。推荐使用腾讯云对象存储 COS(Cloud Object Storage)服务,它提供了分片上传功能。你可以将大文件分割成小块,使用 COS 的 API 进行分块上传。详情请参考:腾讯云对象存储 COS
  2. 使用流式上传:将文件分成多个流进行上传,而不是将整个文件存储在内存中。这样可以减少内存占用,并且可以通过流式上传库来提高上传效率。腾讯云的云点播 VOD(Video on Demand)服务支持流式上传大文件,并提供了丰富的视频处理功能。你可以使用云点播的上传 API 来实现流式上传。详情请参考:腾讯云云点播 VOD
  3. 增加浏览器内存限制:如果你有权限控制浏览器的配置,可以尝试增加浏览器内存限制,从而让浏览器可以处理更大的文件。但这并不是一个理想的解决方案,因为用户可能没有权限更改他们自己的浏览器设置。
  4. 使用其他浏览器或工具:如果Chrome对于大文件上传的支持不足以满足你的需求,你可以尝试使用其他浏览器,比如Firefox、Safari等,或者使用专门的上传工具来处理大文件上传。这些工具可能具有更好的性能和内存管理。

总结起来,为了解决使用(event.target as FileReader).result上传较大文件时,谷歌Chrome崩溃的问题,推荐使用腾讯云的对象存储 COS 或云点播 VOD 服务,进行分片上传或流式上传。这些服务提供了稳定高效的文件上传和处理能力,适用于各种场景。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

cocosCreator导出web工程上传本地图片

在 Cocos Creator 导出的 Web 项目中实现手机或者电脑上传相册图片,可以使用 HTML 和 JavaScript 来实现文件选择功能,并将其与 Cocos Creator 项目进行集成。...3、优化 上面方法是可行的,但是我这里使用的时候有几点优化 1、上传图片过大,容易卡住 2、上传图片为长方形,会显示不全 3、我这里要将长方形的图片只显示一个正方形,即截取中间一部分 优化方案: 1...}); } private handleFileUpload(file: File) { if (file.size > 1024 * 1024) { // 限制文件大小为...FileReader 读取图片``:FileReader 用来读取用户上传的图片,并将其转换为 Base64 数据 URL 格式。...6、注意事项 跨域问题:确保你的服务器支持 https,否则某些浏览器可能会限制上传功能的使用。 UI布局:上传按钮的位置可以根据你的游戏场景动态调整。

3600

10个对web开发人员有用的HTML文件上传技巧

文件上传 我们可以将input 类型指定为file,以在Web应用程序中使用文件上传功能。...管理文件内容 成功上传文件后显示文件内容,站在用户的角度上,如果上传之后,没有一个预览的,就很奇怪也不体贴。 我们可以使用FileReader对象将文件转换为二进制字符串。...然后添加load 事件侦听器,以在成功上传文件获取二进制字符串。...the file size const file = event.target.files[0]; const size = file.size; let msg = ''; // 检查文件大小是否大于...目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传,具体可以看下百度云盘的网页版的上传按钮,在火狐下就支持按照文件进行上传,而在谷歌和Edge下,就会给用户提供一个下拉,让用户选择是根据文件进行上传还是根据文件夹进行上传

1.3K30
  • 10个HTML文件上传技巧

    文件上传 我们可以将input 类型指定为file,以在Web应用程序中使用文件上传功能。...管理文件内容 成功上传文件后显示文件内容,站在用户的角度上,如果上传之后,没有一个预览的,就很奇怪也不体贴。 我们可以使用FileReader对象将文件转换为二进制字符串。...然后添加load 事件侦听器,以在成功上传文件获取二进制字符串。...the file size const file = event.target.files[0]; const size = file.size; let msg = ''; // 检查文件大小是否大于...目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传,具体可以看下百度云盘的网页版的上传按钮,在火狐下就支持按照文件进行上传,而在谷歌和Edge下,就会给用户提供一个下拉,让用户选择是根据文件进行上传还是根据文件夹进行上传

    2.9K10

    浅谈h5文件上传

    前言 近期的需求中包含了上传头图(图片)和上传菜品(excel文件)的功能,商家可灵活上传使用自己制作的问卷图片,用户评价上传的菜品。...今天就针对我在做图片上传和excel上传遇到的一些问题,跟大家分享一下 一、选择文件功能 相信大家都知道,要在前端实现图片的上传,我们离不开的是一个 type=file 的 input...保存页面,再次提交上传成功后后台返回的图片地址(url) 选择图片,上传给后台,后台返回图片地址(url),页面预览,保存页面,再次提交上传成功后后台返回的图片地址(url) 如果我们先将图片上传到服务器...这里的小文件通常是指图像与 html 等格式的文件。 处理事件 FileReader 包含了一套完整的事件模型,用于捕获读取文件的状态,下面归纳了这些事件。...对象URL 使用对象 URL 的时候不用像 FIleReader 一样要先把数据读取到 JavaScript 中,他可以引用 内存中 URL 地址而使用

    2.6K10

    图片上传前预处理,等比缩放、裁剪 (html5 + canvas)

    为true,必须同时设置width、height值大于0 crop: true, // 缩放宽高 width: 640, height:...console.log('裁剪或压缩后的图片数据:'); console.log(result.data); console.log('处理后图片文件大小为...(result.rawdata); console.log('原图片文件大小为:' + imgTools.conversion(result.rawdata.size))...: true 是否裁剪图片(可选) 为true,必须同时设置width、height值大于0 裁剪规则: 图片缩放到一定比列(即一边等于设置值,另一边超出设置值部分裁去),居中裁剪 width...id 3 浏览器不支持addEventListener() 4 浏览器不支持FileReader接口,需升级或更换高版本的浏览器 5 未选中文件 6 选中的文件不是图片文件 7 文件读取错误 8 图片数据加载错误

    3.5K60

    图片上传前预处理,等比缩放、裁剪 (html5 + canvas)

    (详见参数说明) 非图片文件将不做处理,返回文件数据data(name, lastModified, lastModifiedDate, size, type)等信息 使用方法 <div id="imgWrapper...为true<em>时</em>,必须同时设置width、height值<em>大于</em>0 crop: true, // 缩放宽高 width: 640, height:...console.log('裁剪或压缩后的图片数据:'); console.log(<em>result</em>.data); console.log('处理后图片<em>文件大小</em>为...(<em>result</em>.rawdata); console.log('原图片<em>文件大小</em>为:' + imgTools.conversion(<em>result</em>.rawdata.size))...addEventListener() 4 浏览器不支持<em>FileReader</em>接口,需升级或更换高版本的浏览器 5 未选中<em>文件</em> 6 选中的<em>文件</em>不是图片<em>文件</em> 7 <em>文件</em>读取错误 8 图片数据加载错误 9 当前图片<em>文件</em>尺寸小于裁剪尺寸

    2.1K20

    富媒体在客服IM消息通信中的秒发实践

    比如大于70M的视频,在网络,电脑硬件等环境都较好的情况下,从读取文件到获取到首帧图片传输的过程大概需要2~3s,如果在网络一般,同一环境下有多人在发送视频文件,或者硬件设备一般的情况下时间会更长。...三、解决方案与成效 1、将fileReader.target.result作为视频的url在页面渲染 最初使用的方式是在视频上传CDN,同时截取视频首帧,然后将截取的视频首帧也上传到CDN,再通过长链...在给客户端发送视频信息,要携带首帧和视频时长,作为展示封面,历史的做法是: 首先前端获取文件信息后通过canvas转换成图片再上传到CDN; 在获取到首帧和文件信息之后,先上传到CDN,返回URL后再通过长链发送给用户...取首帧要读取文件,既然是读取文件,还是存在一定的耗时,如下代码片段所示,这段耗时任务也会影响到客服的使用体验。 export function getVideoInfo(file, msgid?...两者的主要区别在于: 通过FileReader.readAsDataURL(file)获取到的是一段data:base64的字符串,base64位的字符串较大 通过URL.createObjectURL

    1.5K61

    salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件

    但是当我们的项目整体使用第三方的前端框架,例如VUE或者angular等前端框架,有时使用apex:inputFile反而不是很方便,需要用到html的原生的附件上传的标签<input type="file...本篇主要通过 JavaScript中的<em>FileReader</em>对象,将<em>文件</em>进行base64编码,然后后台进行base64解码来实现Blob对象传递到后台。...其中要注意的是Base64编码以后,对<em>文件大小</em>有限制,<em>使用</em>input type file最大<em>上传</em>大小为4.3M。javascript中<em>使用</em><em>FileReader</em>对数据进行二进制处理。...accountId}', 26 function(<em>result</em>,event) { 27 alert(<em>result</em>...2.找到对应的Account,附件已经成功绑定<em>上传</em>。 ? 总结:此篇主要描述<em>使用</em> input type=file<em>时</em>,salesforce针对<em>上传</em>附件的处理。

    1.5K10

    JS魔法堂之实战:纯前端的图片预览

    一、前言                                   图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了。...result:读取到的文件内容,只读。 error:类型为DOMError,表示在读取文件发生的错误,只读。 (3). 方法 abort():中止读取操作,并将readyState设置为DONE。...浏览器支持 FF3.6+,Chrome7+,IE10+ 三、准备功夫2──DXImageTransform.Microsoft.AlphaImageLoader滤镜     (1)....base64字符串,若图片较大那么字符串则更长,若页面出现reflow则会导致性能下降。...预览的img标签使用绝对定位,从而脱离正常文档流,那么就与文档的其他元素无关了,而reflow则不会影响性能。   2.

    2.4K60

    Hudi小文件问题处理和生产调优个人笔记

    文件处理 Apache Hudi提供的一个关键特性是自我管理文件大小,这样用户就不需要担心手动维护表。...在进行insert/upsert操作,Hudi可以指定文件大小。 核心配置 为了便于说明,本文只考虑 COPY_ON_WRITE 表的小文件自动合并功能。...当更新减小文件大小时(例如使许多字段无效),则随后的写入将文件将越来越小。...,新插入的记录将分配给小文件以便使其达到120MB,File_1将会插入80MB大小的记录数,File_2将会插入40MB大小的记录数,File_3将插入30MB大小的记录数。...调整文件大小: 设置limitFileSize以平衡接收/写入延迟与文件数量,并平衡与文件数据相关的元数据开销。 时间序列/日志数据: 对于单条记录较大的数据库/nosql变更日志,可调整默认配置。

    1.8K20

    【前端知乎】445- File FileList 和 FileReader 对象详解

    File 对象、FileList 对象与 FileReader 对象大家或许不太陌生,常见于文件上传下载操作处理(如处理图片上传预览,读取文件内容,监控文件上传进度等问题)。...最常见的使用场合是表单的文件上传控件,用户在一个 元素上选择文件后,浏览器会生成一个数组,里面是每一个用户选中的文件,它们都是 File 实例对象。...File.size:文件大小(单位字节)。只读 File.type:文件的 MIME 类型。...3.1 实例属性 FileReader.error : 表示在读取文件发生的错误。只读 FileReader.readyState : 整数,表示读取文件的当前状态。...只读 仅在读取操作完成后才有效,返回的数据格式取决于使用哪个方法来启动读取操作。 3.2 事件处理 FileReader.onabort : 处理abort事件。该事件在读取操作被中断触发。

    1.6K30

    文件分片上传和分片下载

    使用 FileReader 读取文件 FileReader 是一个前端浏览器 API,允许我们异步读取文件内容并将其转换为可用的数据格式,如文本或二进制数据。...使用案例 下面,我们来用一个例子来简单说明一下FileReader使用方式。...该组件有一个文件选择框。当用户选择一个文件文件内容会使用 FileReader[6] 读取到 ArrayBuffer。然后在对应的回调中就可以处理对应的Blob信息了。...= function(event) { // 读取操作成功完成执行的代码 const result = event.target.result; console.log('文件内容:',...如果存在,则从断点处继续上传。 在后端,可以使用临时文件夹或数据库记录已接收的分片信息,包括已上传的分片索引和分片大小。 上传完成前,保存上传状态,以便在上传中断能够恢复上传进度。

    19710

    JS中Buffer数据详解

    对于不同类型的文件FileReader 提供不同的方法读取文件。...创建读取文件的对象 var reader = new FileReader() readAsDataURL(Blob|File) 读取文件并将文件以数据URI的形式保存在result属性中,...(文件上传可以在前端判断文件大小是否合适) type:二进制数据的 MIME 类型,全部为小写,如果类型未知,则该值为空字符串。...(文件上传可以在前端判断文件类型是否合适) gbk编码: 数字字母 一字节 1KB= 1024字节 一中文汉字是 2字节 UTF-8编码: 数字字母 一字节 1KB= 1024字节 一个中文汉字是...3字节 ​ Silce 读取部分内容 ​ 有时候我们读取一部分而不是全部内容,Filereader对象支持一个slice( )方法,在火狐中用mozSlice( ),在chrome中webkitSilde

    6.6K30
    领券