Question

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

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

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

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

这里是the code

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

Answer 1

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

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

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

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

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

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

1 个答案: