AngularJS发送含FabricJS画布信息与ByteArray的POST请求遇后端接收null问题

Hey there, let's figure out why your backend is receiving null when you send that POST request. Based on the code snippets you shared, here are the key issues to check and fixes to try:

1. Fix the Broken Base64 Regex #

First up, your regex for stripping the data URI prefix has a syntax error. The forward slash in image/[a-z]+ needs to be escaped (otherwise it closes the regex early), which means your strImage variable is probably still holding the full data URI instead of just the base64 string. That's a critical starting point.

Corrected code:

var strImage = dataURI.replace(/^data:image\/[a-z]+;base64,/, "");

2. Fix the Typo & Validate Your ByteArray Conversion #

You wrote covertBase64ToByteArray—note the missing 'n' (it should be convertBase64ToByteArray). If this function is misnamed, it'll throw an error, leaving your byte array as undefined and breaking the request body entirely.

Here's a reliable implementation for the conversion function to use as a reference:

function convertBase64ToByteArray(base64Str) {
  const binaryString = atob(base64Str);
  const byteArray = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    byteArray[i] = binaryString.charCodeAt(i);
  }
  return byteArray;
}

3. Choose the Right Format for Sending Data #

JSON doesn't natively support binary data like Uint8Array. If you're trying to serialize this directly into a JSON object and send it as application/json, the byte array will get mangled (often converted to an empty object or null), which explains why your backend sees nothing.

You have two solid options here:

Option A: Send the Base64 String Directly #

Skip the byte array conversion entirely and send the base64 string in your JSON body. Your backend can then decode it to binary data. This is the simplest approach:

var data = {
  canvasInfo: /* Your FabricJS canvas data here */,
  thumbnailBase64: strImage // Use the base64 string instead of byte array
};

// Send as JSON like usual
$http.post('/your-api-endpoint', data)
  .then(res => { /* Handle success */ })
  .catch(err => { /* Handle error */ });

Option B: Use FormData for Binary Data #

If you absolutely need to send raw binary data, wrap everything in FormData (which is designed for mixed data types including binaries). Make sure you don't manually set the Content-Type header—let the browser handle it automatically:

const formData = new FormData();
formData.append('canvasInfo', JSON.stringify(/* Your FabricJS canvas data */));
formData.append('thumbnail', new Blob([byteArray], { type: $rootScope.imageType }));

$http.post('/your-api-endpoint', formData)
  .then(res => { /* Handle success */ })
  .catch(err => { /* Handle error */ });

4. Double-Check Backend Parsing Logic #

Finally, confirm your backend is set up to parse the request format you're sending:

• If using JSON with base64, ensure the backend expects application/json and correctly parses the base64 string.
• If using FormData, make sure the backend is configured to handle multipart/form-data requests and can extract both the JSON canvas data and binary thumbnail.

内容的提问来源于stack exchange，提问作者MohammadJavad Seyyedi