Javascript:将 Uint8Array 中的二进制数据转换为字符串损坏文件

标签 javascript jquery ajax encoding base64

我正在尝试通过标准 jQuery $.ajax 调用将视频文件分块上传到服务器。过程很简单:

  1. 在文件对象上使用 slice() 方法来读取 block
  2. 使用FileReader.readAsArrayBuffer读取生成的blob
  3. 在 FileReader.onload 回调中创建该结果的 Uint8Array
  4. 使用String.fromCharCode.apply(null, intArrayName)将其转换为二进制字符串
  5. 将该二进制字符串作为 block 上传到 AJAX 调用的 data 属性

当我完成上传所有 block 时,服务器的 API 提示文件上传不完整。为了测试这个方法,我将连接的二进制字符串转换为 Blob,并让 Chrome 将其保存到我的下载文件夹中,却发现我的媒体播放器说该文件无法播放。

我已阅读此网站上的帖子和 other articles建议直接将整数表示的二进制数据转换为字符串会导致数据丢失,并且建议将其转换为 Base64 编码的字符串,因为 Javascript 没有像 C# 那样的 StreamContent 对象。

问题是,即使我将 Content-Transfer-Encoding 设置为 base64 我认为 API(不是我们编写的)也不会启动并可以得知需要进行 Base64 解码。

我的问题是:这是通过 AJAX 调用安全发送视频数据的唯一可靠方法吗?如果没有,我还能如何在 AJAX 请求的数据字段中发送它?互联网上可能有数千个这样的上传者,但我无法找到有关如何执行此操作的可靠文档。如果服务器需要接受 Base64 编码,我们可能需要编写一个中间人 API 来为我们进行解码。

最佳答案

感谢Patrick Evans ,事实证明我所需要做的就是上传 blob 本身:

function upload(file) {
  var offset = 0; // what's been sent already
  var fileSize = file.size;
  var chunkSize = 64 * 1024; // bytes

  while (offset < fileSize) {
    var blob = file.slice(offset, chunkSize + offset);

    var urlToUse = ((offset + blob.size) >= fileSize) ? videoFinishBaseUrl : videoContinueBaseUrl;

    $.ajax({
      url: urlToUse,
      method: 'POST',
      data: blob,
      headers: requestHeaders,
      contentType: false,
      processData: false,
      cache: false,
      async: false,
      success: function(data) {
        jQuery('#uploadmsg').text('Finished offset ' + offset);
        offset += blob.size;
      },
      error: function(err) {
        jQuery('#uploadmsg').text(err);
      }
    });

  }
};

关于Javascript:将 Uint8Array 中的二进制数据转换为字符串损坏文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34887297/

相关文章:

php - 来自 mysql 的长轮询信息不起作用

javascript - 超越在 document.ready() 中编写简单函数

Javascript 验证在 codeigniter 中不起作用

javascript - JQuery 验证工作正常,但 SubmitHandler 不工作

javascript - 检查外部js文件是否已经加载

javascript - 如何强制按顺序加载脚本数组?

javascript - 阻止 JavaScript chop 前导 0

Javascript:jquery 中的父级

jquery-plugins - jQuery DoubleSelect/Cascade/Dependent/WalkRight 选择菜单是否支持 Ajax?

javascript - 如果变量不存在如何执行语句?