以字节形式读取文件切片并发送到服务器？

Question

我想使用 FileReader 读取文件的一部分，然后将其发送到服务器。这是我目前所拥有的：

const createReader = onRead => {
  const reader = new FileReader();
  reader.onloadend = function(evt) {
    if (evt.target.readyState === FileReader.DONE) {
      const arrayBuffer = evt.target.result;
      const bytes = new Uint8Array(arrayBuffer);
      console.log("BYTES: ", bytes);
      onRead(evt.target.result);
    }
  };
  return reader;
};

const reader = createReader(fileSlice => {
  console.log("BYTES: ", fileSlice);
  // send to server
});
reader.readAsArrayBuffer(blob);

这是我上传一个简单的 .txt 文件时打印的内容：

但是，它 returns 是一个数组，我不确定如何将其转换成可以通过 HTTP 发送到我的服务器的格式。

有谁知道我需要做什么才能将该字节数组转换成我最终可以转回原始文件的格式？

Answer 1

您可以POST将Uint8Array发送到服务器。您可以使用 TextDecoder

将 Uint8Array 转换为字符串

Answer 2

读取文件块，确保使用readAsArrayBuffer

var readChunck = function (offset, length, file) {
  var r = new FileReader();
  var chunck = file.slice(offset, length + offset);
  r.onload = readEventHandler;
  r.readAsArrayBuffer(chunck)
}

在 vent handler (readEventHandler) 中，将 ArrayBuffer 转换为 Base64String 并 post 到服务器：

var readEventHandler = function (evt) {

  var data = {
    data: self.arrayBufferToBase64String(evt.target.result)
  }

  self.httpClient.post(url, data)
    .subscribe(data=> {
     // do stuff 
    });

  // ...
}

这里是转换函数：

private arrayBufferToBase64String(buffer: ArrayBuffer) {
  let binaryString = ''
  var bytes = new Uint8Array(buffer);
  for (var i = 0; i < bytes.byteLength; i++) {
    binaryString += String.fromCharCode(bytes[i]);
  }

  return window.btoa(binaryString);
}

在服务器端（ASP Core Web API 在这种情况下）：

[HttpPost, DisableRequestSizeLimit]
[Route("{blobId}/uploads/{uploadId}/parts/{partNumber}")]
public async Task<IActionResult> UploadPart(
  [FromRoute] string blobId,
  [FromRoute] string uploadId,
  [FromRoute] int partNumber,
  [FromBody] FilePartModel part)
  {
    if (!GuidValidator.IsValidGuid(blobId)) throw new ArgumentException("Invalid BLOB Id");
    if (!GuidValidator.IsValidGuid(uploadId)) throw new ArgumentException("Invalid Upload Id");

    var bytes = Convert.FromBase64String(part.Data);
    using (var stream = new MemoryStream(bytes))
    {
      var etag = await _blobsService.UploadPartAsync(Guid.Parse(blobId), Guid.Parse(uploadId), partNumber, stream);

      return Ok(new FilePart { ETag = etag, PartNumber = partNumber });
    }
}

FilePartModel只是一个简单的模型class:

public class FilePartModel
{
    public string Data { get; set; }
}

以字节形式读取文件切片并发送到服务器？

Read file slice as bytes and send to server?

javascript

filereader