將Uint8Array從瀏覽器傳輸到節點

Question

我有一個包含原始像素數據（RGBA）的Uint8Array ，需要將其發送到節點服務器進行處理。 我將其轉換為瀏覽器上的Blob，然后通過ajex發送，但是在節點側檢索數據卻有問題。 我可以通過req.files.image.data將blob作為Buffer req.files.image.data但是如何將其轉換回與Uint8Array相同的序列？

在瀏覽器上：

sendBlob(new Blob(data, {type: "application/octet-stream"}), ...)

function sendBlob (blob, name) {
  return new Promise((resolve, reject) => {
    let data = new FormData()
    data.append('image', blob, name)
    data.append('width', 640)
    data.append('height', 427)
    $.ajax({
       url: '/upload',
       type: 'POST',
       data: data,
       processData: false,
       contentType: false,
       error: reject,
       success: resolve
    })
  })
}

在節點服務器上：

lwip.open(req.files.image.data, {
  width: parseInt(req.body.width),
  height: parseInt(req.body.height)
}, (image, err) => ...)

這抱怨Buffer size does not match width and height因為req.files.image.data是blob而不是包裝的Uint8Array 。

Answer 1

從發布的數據創建一個Uint8Array 。

let data = new Uint8Array(req.files.image.data);
lwip.open(data, {
  width: parseInt(req.body.width),
  height: parseInt(req.body.height)
}, (image, err) => ...)

Answer 2

原來問題出在我創建Blob的方式上。 我傳遞了一個TypedArray，blob只知道如何存儲TypedArrays數組。 因此它在將數據存儲到Blob之前將其轉換為字符串。

解決方案是將TypedArray封裝在數組中。

sendBlob(new Blob([data], {type: "application/octet-stream"}), ...)