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

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

Uploading Techniques in Javascript

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

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

- 作为旁注，您可以随时限制上传的内容，这样就不会发生，但如果您想要实现大型上传，这是一个很好的起点。

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

1 个答案: