javascript - 编写可移植的js上传代码(JS代码在桌面上有效，在移动设备上失败)

Question

好的，我正在开发一个 Laravel Web 项目，我编写了这段代码(我在网上学到的)来上传视频和照片。此代码在上传图片时效果很好，因为它们很轻。但当处理视频时，它对于轻型视频效果很好，但对于 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);
  }

事件监听器中的函数具有执行适当操作(例如显示进度条)的代码。提前感谢您的帮助

Answer 1

您遇到的基于错误消息“由于内存不足而无法完成操作”的问题是您专门用完了 RAM(或为移动设备上的该应用程序/实例分配的 RAM) )。

Uploading Techniques in Javascript

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

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

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