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

Question

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

我完成了添加文件输入标记和读取文件等所有工作。

我使用 FileReader 将文件读取为 ArrayBuffer 并使用 Uint8Array View ，然后将 View 发送到服务器。

我尝试了 txt、pdf 和图像，效果很好。但是当使用它处理视频文件时，计算机会滞后，我什至没有等待就关闭了浏览器!

这是the code

为什么视频文件会出现延迟？有办法避免吗？!

Answer 1

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

您需要分块上传视频。要制作您选择的文件 block ，您可以看看这里 HTML5 file reader 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);

您需要根据您的要求进行修改。当您获得该 block 时，请发出上传或播放的请求。

您还可以在此处播放您的视频文件 Upload your Video file here to test

希望这能解决您的问题。要使其正常工作，您还需要在后端正确处理 block 。