ArrayBuffer疯狂-如何将二进制文件放入arraybuffer

Question

This is doing my head in.

I have a jquery ajax post returning output from a mysql database. One field is binary. I wish to proccess that binary field using Javascript. I have been around and around in circles trying different approaches non of which seem satisfactory and most hit a road block.

I can pass the data up base64 encoded and then decode it in Javascript.

The data is a packet so I wish to decode it using a DataView as it has all the Get... calls for treating the data as a packet ( like a C structure ).

I have tried Blobs and Typed Arrays but everwhere I go it seems to just not be the right thing.

What I am after is something like this:

var ab = new ArrayBuffer ( atob( my_base64_encoded_packet_data )
var dv = new DataView ( ab );

Simple! No. The only way I have managed to get close is to using fileReader, like this ( roughly ):

fileReader.onload = function ( ) {
    var newBuf = this.result;
    callback( newBuf );
   return;
};
fileReader.readAsArrayBuffer( buf );

Where buf is a blob and newBuf is the ArrayBuffer.

Here is another approach which does what I want, but seems labour intensive.

function str2ab(str) {
  var buf = new ArrayBuffer(str.length);
  var bufView = new Uint8Array(buf);
  for (var i=0, var strLen=str.length; i<strLen; i++) {
    bufView[i] = str.charCodeAt(i);
  }
  return buf;
}

Help please. Thanks

Answer 1

The problem is that you are using jQuery's ajax. jQuery can't handle binary since it wants everything to be strings. Browser tries to be smart with it and tries to transform the response if you want to receive it as text

What you want is the raw binary so a responseType that is either arraybuffer or a blob is what you want.

The solution is either stick to doing xhr manually or use the new fetch method

fetch(url, opts).then(res => res.arrayBuffer()).then(buffer => {
   // code here
})

Sending and Receiving Binary Data - MDN