前端：JS：将图片转为二进制与其他文本传入后端

在前端，可以将图片转换为二进制数据，并将其与其他文本字符串一起发送到后端。一种常见的方法是将所有数据组合为一个

FormData

对象，然后通过 AJAX 或 Fetch API 将其发送给后端。以下是一个示例：

// 获取文件输入框和其他文本输入框const fileInput = document.getElementById('fileInput');const textInput = document.getElementById('textInput');// 监听文件输入框的 change 事件
fileInput.addEventListener('change',function(){// 获取选中的文件const file = fileInput.files[0];if(file){// 创建 FileReader 对象const reader =newFileReader();// 监听读取完成事件
    reader.onloadend=function(){// 读取完成后，reader.result 包含转换后的二进制数据const binaryData = reader.result;// 创建 FormData 对象const formData =newFormData();// 将二进制数据和其他文本添加到 FormData
      formData.append('image', file);// 二进制图片数据
      formData.append('text', textInput.value);// 其他文本数据// 发送数据到后端fetch('/your-backend-endpoint',{method:'POST',body: formData,}).then(response=>{// 处理后端返回的响应}).catch(error=>{// 处理错误
          console.error('Error:', error);});};// 以 DataURL 格式读取文件内容
    reader.readAsDataURL(file);}});

解释

：
当文件输入框内容发生变化时，会触发

change

事件。然后，它会读取选中的文件并使用

FileReader

将其转换为二进制数据。接着，创建一个

FormData

对象，并使用

formData.append

方法将图片的二进制数据和其他文本数据添加到这个对象中。最后，通过

fetch

方法将

FormData

对象以 POST 请求发送到后端的特定端点 (

/your-backend-endpoint

)。

注意

：
在后端，需要相应地处理这些数据，解析 FormData 并提取其中的图片二进制数据和其他文本数据。