将二进制图片数据通过接口传给后端

可以使用XMLHttpRequest对象将二进制图片数据通过接口传给后端。以下是一个将二进制图片数据上传到后端的示例：

function uploadImage(imageData, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload-image');

  // 设置请求头
  xhr.setRequestHeader('Content-Type', 'image/png');

  // 设置响应类型
  xhr.responseType = 'json';

  // 设置回调函数
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        callback(xhr.response);
      } else {
        console.error('上传图片失败');
      }
    }
  };

  // 发送请求
  xhr.send(imageData);
}

在上述示例中，imageData是二进制图片数据，callback是上传成功后的回调函数。在发送请求之前，我们需要使用setRequestHeader方法设置请求头，将数据类型设置为image/png。接着，我们将响应类型设置为json，以便在接收到响应时可以将其解析为JavaScript对象。然后，我们使用onreadystatechange事件监听器监听异步请求的状态变化，当请求状态为4（即请求已完成）时，判断响应状态码是否为200，如果是200，则调用回调函数，并将响应数据作为参数传递给该函数。最后，我们使用send方法发送请求，并将imageData作为请求体数据发送。

需要注意的是，请求头中的数据类型应该与上传的图片类型一致。在示例中，我们将数据类型设置为image/png，因此上传的图片数据应该是PNG格式的二进制数据。如果上传的是其他格式的图片数据，则需要将数据类型设置为相应的格式。

如果这个二进制图片数据是多条：

如果二进制图片数据是多条，你可以将它们放在一个数组中，然后使用FormData对象来发送数据。以下是一个示例：

function uploadImages(imageDataArray, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload-images');

  // 创建FormData对象
  const formData = new FormData();

  // 添加图片数据到FormData对象中
  imageDataArray.forEach((imageData, index) => {
    formData.append(`image${index}`, imageData);
  });

  // 设置回调函数
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        callback(xhr.response);
      } else {
        console.error('上传图片失败');
      }
    }
  };

  // 发送请求
  xhr.send(formData);
}

在上述示例中，我们将二进制图片数据放在一个数组中，并使用FormData对象来发送数据。我们先创建一个FormData对象，然后使用append方法将图片数据添加到FormData对象中。注意，这里我们为每张图片设置了一个键名，以便后端能够正确处理它们。接着，我们设置了一个回调函数，在上传成功时调用该函数。最后，我们使用send方法发送请求，并将FormData对象作为请求体数据发送。

需要注意的是，使用FormData对象上传文件时，浏览器会自动设置合适的请求头，因此不需要手动设置请求头。另外，如果上传的文件比较大，可以考虑使用分片上传，避免一次性上传大文件导致的性能问题。

FormData对象的append方法不会覆盖之前添加的数据，而是会将新的数据添加到末尾。如果键名已经存在，则会将新的值添加到该键名对应的值的末尾，而不是覆盖原有的值。

例如，以下代码会创建一个包含两个键值对的FormData对象：

const formData = new FormData();
formData.append('foo', 'bar');
formData.append('foo', 'baz');

第二次调用append方法时，会将新的值'baz'添加到键名'foo'对应的值的末尾，因此最终的FormData对象中键名为'foo'的值为'bar,baz'。

如果你需要覆盖之前添加的数据，可以先使用delete方法删除该键名对应的值，然后再调用append方法添加新的值：

formData.delete('foo');
formData.append('foo', 'new-value');

这样会删除键名为'foo'的值，然后将新的值'new-value'添加到该键名中。