编写可移植的 js 上传代码（JS 代码在桌面上工作，在移动设备上失败）

Question

好的，我正在做一个 laravel 网络项目，我已经编写了这段代码（我在网上学到的）来上传视频和照片。上传图片时，此代码可以正常工作，因为它们很轻。但是当它处理视频时，它适用于轻量级视频，但会尝试冻结浏览器以查看 30MB 以上的视频。最烦人的部分是，当我尝试从移动设备上传（图片或视频）时，设备抱怨“由于内存不足而无法完成操作”事实上，此代码会冻结浏览器以获取大量视频并抱怨移动设备上的内存意味着它不够好（便携）。如果有更好的 sn-p 代码来完成这项工作，我将不胜感激（欢迎使用 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);
  }

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

Answer 1

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

Uploading Techniques in Javascript

你看到上传 30MB 文件的问题是它需要将整个文件加载到内存中，我不确定谁拥有这些内存地址的确切细节，因为它是应用程序限制，所以 Chrome 或设备本身.您最好的选择是进行分块上传，它有很多好处，现在您只需占用 1MB（或您想要的任何大小）即可进行分块。这使得上传更流畅，因为它不再需要加载整个视频。

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

-- 作为旁注，您始终可以限制上传的数量，这样就不会发生这种情况，但如果您想要实现大上传量，这是一个很好的起点。