在前端，可以將圖片轉(zhuǎn)換為二進(jìn)制數(shù)據(jù)，并將其與其他文本字符串一起發(fā)送到后端。一種常見的方法是將所有數(shù)據(jù)組合為一個(gè) FormData 對(duì)象，然后通過 AJAX 或 Fetch API 將其發(fā)送給后端。以下是一個(gè)示例：
// 獲取文件輸入框和其他文本輸入框
const fileInput = document.getElementById('fileInput');
const textInput = document.getElementById('textInput');
// 監(jiān)聽文件輸入框的 change 事件
fileInput.addEventListener('change', function () {
// 獲取選中的文件
const file = fileInput.files[0];
if (file) {
// 創(chuàng)建 FileReader 對(duì)象
const reader = new FileReader();
// 監(jiān)聽讀取完成事件
reader.onloadend = function () {
// 讀取完成后，reader.result 包含轉(zhuǎn)換后的二進(jìn)制數(shù)據(jù)
const binaryData = reader.result;
// 創(chuàng)建 FormData 對(duì)象
const formData = new FormData();
// 將二進(jìn)制數(shù)據(jù)和其他文本添加到 FormData
formData.append('image', file); // 二進(jìn)制圖片數(shù)據(jù)
formData.append('text', textInput.value); // 其他文本數(shù)據(jù)
// 發(fā)送數(shù)據(jù)到后端
fetch('/your-backend-endpoint', {
method: 'POST',
body: formData,
})
.then(response => {
// 處理后端返回的響應(yīng)
})
.catch(error => {
// 處理錯(cuò)誤
console.error('Error:', error);
});
};
// 以 DataURL 格式讀取文件內(nèi)容
reader.readAsDataURL(file);
}
});
解釋：
當(dāng)文件輸入框內(nèi)容發(fā)生變化時(shí)，會(huì)觸發(fā) change 事件。然后，它會(huì)讀取選中的文件并使用 FileReader 將其轉(zhuǎn)換為二進(jìn)制數(shù)據(jù)。接著，創(chuàng)建一個(gè) FormData 對(duì)象，并使用 formData.append 方法將圖片的二進(jìn)制數(shù)據(jù)和其他文本數(shù)據(jù)添加到這個(gè)對(duì)象中。最后，通過 fetch 方法將 FormData 對(duì)象以 POST 請(qǐng)求發(fā)送到后端的特定端點(diǎn) (/your-backend-endpoint)。文章來源：http://www.zghlxwxcb.cn/news/detail-858695.html
注意：
在后端，需要相應(yīng)地處理這些數(shù)據(jù)，解析 FormData 并提取其中的圖片二進(jìn)制數(shù)據(jù)和其他文本數(shù)據(jù)。文章來源地址http://www.zghlxwxcb.cn/news/detail-858695.html
到了這里，關(guān)于前端：JS：將圖片轉(zhuǎn)為二進(jìn)制與其他文本傳入后端的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
