在前端，可以将图片转换为二进制数据，并将其与其他文本字符串一起发送到后端。一种常见的方法是将所有数据组合为一个 <code>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 = new FileReader();

// 监听读取完成事件

reader.onloadend = function () {

// 读取完成后，reader.result 包含转换后的二进制数据

const binaryData = reader.result;

// 创建 FormData 对象

const formData = new FormData();

// 将二进制数据和其他文本添加到 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 并提取其中的图片二进制数据和其他文本数据。