将视频从客户端发送到服务器

Question

我最近阅读了有关File API的信息，该文件API允许客户端使用网站中文件系统中的文件。

我做了所有添加文件输入标签，读取文件和所有内容的工作。

我使用FileReader将文件读取为ArrayBuffer并在其上使用了Uint8Array视图，然后将视图发送到服务器。

我尝试使用txt，pdf和图像，但效果很好。 但是，当将它与视频文件一起使用时，计算机却滞后了，我什至没有等待并关闭浏览器！

这是代码

为什么视频文件会出现延迟，有办法避免这种情况吗？

Answer 1

我遍历了代码，您将读取的数据追加到数组中，这可能是它滞后的原因。

您需要分块上传视频。 要制作您选择的文件块，您可以在此处查看HTML5文件阅读器API

  function readBlob(opt_startByte, opt_stopByte) {
    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }

    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        document.getElementById('byte_content').textContent = evt.target.result;
        document.getElementById('byte_range').textContent = 
            ['Read bytes: ', start + 1, ' - ', stop + 1,
             ' of ', file.size, ' byte file'].join('');
      }
    };

    var blob = file.slice(start, stop + 1);
    reader.readAsBinaryString(blob);
    }

    document.querySelector('.readBytesButtons')
      .addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);

您需要根据需要进行修改。 在这里，当您获得块时，请求上传或播放它。

您也可以在这里播放视频文件在这里上传视频文件进行测试

希望这能解决您的问题。 为了使此工作正常进行，您还需要在后端正确处理这些块。