JS上传图片流

使用 JavaScript 将图片上传到服务器，有两种处理方式：FormData 和 FileReader。

FormData 方式

javascript
const fileInput = document.getElementById('file-input');
const xhr = new XMLHttpRequest();
const formData = new FormData();

xhr.open('POST', '/upload-image');

// 将文件添加到表单对象中
formData.append('image', fileInput.files[0]);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
    alert('上传成功！');
  }
};

xhr.send(formData);

以上代码使用了 XMLHttpRequest 对象提交 FormData 表单数据，其中的 FormData 对象是 HTML5 中新增的对象。在表单内容类型为 multipart/form-data 类型时常被用来上传文件或二进制数据到服务器。可以通过 append() 方法把文件和其他表单参数一起发出去，在服务器端接收并解析 FormData，从而完成文件上传功能。

FileReader 方式

javascript
const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  const reader = new FileReader();

  reader.onload = function(event) {
    const image = event.target.result;

    // 发送 base64 编码的图片到服务器
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload-image');
    xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
        alert('上传成功！');
      }
    };
    xhr.send(JSON.stringify({ image }));
  };

  reader.readAsDataURL(file);
});

以上代码使用了 FileReader 对象读取上传的文件内容并以 base64 的方式编码为字符串，然后使用 XMLHttpRequest 对象将该字符串发送到服务器。可以在服务器端接收 base64 编码的图片，进行解码后再保存到文件中。

总的来说，使用 FormData 方式上传图片比较简单易用，而且可以直接使用 multipart/form-data 格式来上传文件，不需要手动对二进制数据进行编码/解码。使用 FileReader 方式可以压缩图片和控制上传质量，在客户端能够显示图片预览，但是需要对上传数据进行手动编码。需要根据实际需求选择适合自己的上传方式。