javascript - 编写可移植的js上传代码(JS代码可在台式机上运行，​​而无法在移动设备上运行)

好的，我正在做一个laravel网络项目，我已经编写了这段代码（我从网上学习了）来上传视频和照片。此代码在上传图片时效果很好，因为它们很轻。但是，当涉及视频时，它适用于轻量级视频，但会尝试冻结浏览器以获取30MB以上的视频。最烦人的部分是，当我尝试从移动设备上载（图片或视频）时，设备抱怨“由于内存不足而无法完成操作”，因为该代码冻结了浏览器的大量视频，并抱怨移动设备上的内存，这意味着不够好（便携式）。请给我一个更好的代码片段来完成这项工作（欢迎jQuery），我将不胜感激。

这是我所拥有的

function uploadPhoto(url, photo) {

var token = $('#token').val();
var formData = new FormData();
formData.append('photo', photo);
formData.append('_token', token);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener('progress', progressHandler, false);
ajax.addEventListener('load', completeHandler, false);
ajax.addEventListener('error', errorHandler, false);
ajax.addEventListener('abort', abortHandler, false);
ajax.open('POST', url);
ajax.send(formData);
  }

function uploadVideo() {
    var route = $('#uploadUrl').val();
    var token = $('#token').val();
    var video = document.getElementById('postVideo').files[0];
    var formData = new FormData();
    formData.append('video', video);
    formData.append('_token', token);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener('progress', progressHandler, false);
    ajax.addEventListener('load', completeHandler, false);
    ajax.addEventListener('error', errorHandler, false);
    ajax.addEventListener('abort', abortHandler, false);
    ajax.open('POST', route);
    ajax.send(formData);
  }

事件侦听器中的函数具有执行诸如显示进度条之类的适当操作的代码。。在此先感谢您的帮助

最佳答案

根据错误消息'Failed to complete operation due to low memory'遇到的问题是，您专门用完了RAM（或移动设备上为该应用程序/实例分配的RAM）。

Uploading Techniques in Javascript

您会看到上传30MB文件的问题是它需要将整个文件加载到内存中，但我不确定谁拥有这些内存地址的确切详细信息会受到应用程序限制（例如Chrome或设备本身）。最好的选择是执行块上载，这有很多好处，现在只需要占用1MB（或您想要的任何大小）的块即可。这样一来，上传就变得更加流畅，因为它不再需要加载整个视频。

这是一篇相当大的文章/解决方案，所以我不会在答案中添加代码，因为其中包含很多内容，但我以此为基础来实现分块上传。这将解决所有浏览器/设备上的问题。

-作为一个旁注，您总是可以限制上传的数量，这样就不会发生，但是如果要实现大上传，则这是一个不错的起点。