首頁猿問無法在“FormDat...

無法在“FormData”上執行“追加”：參數 2 不是“Blob”類型

JavaScript

長風秋雁 2023-03-24 15:06:12

我有一個允許用戶上傳多張圖片的上傳器。為了只創建或更新他想要添加/更改的圖像，我更新了一個如下所示的對象：{main: Blob, "1": Blob, "2":Blob}所以如果后面只需要更新“1”，發送的對象只會包含 {"1": Blob}單擊保存時，它會觸發一個函數，該函數應該將圖像附加到 formData()。遺憾的是 formData 永遠不會更新。我有以下錯誤：無法在“FormData”上執行“追加”：參數 2 不是“Blob”類型。export async function uploadImages(files, userId) { try { const images = new FormData(); files.main && images.append("image", files.main, "main"); files[1] && images.append("image", files[1], "1"); files[2] && images.append("image", files[2], "2"); const res = await ax.post(process.env.SERVER_URL + "/upload-images", { images, userId, }); return "success" } catch (err) { return "error" }}如何解決這個問題？謝謝！

查看完整描述

4 回答

HUX布斯

TA貢獻1876條經驗獲得超6個贊

您不應該在控制臺中看到 FormData 對象的內容，因為它不可序列化。您可以改為檢查請求負載，檢查瀏覽器開發工具中的“網絡”選項卡，找到您的請求并查看“標頭”選項卡底部以查看“FormData”日志。你會看到這樣的東西：

此外，您應該在 axios 中將標頭“Content-Type”設置為“multipart/form-data”。這是工作示例：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

const myformData = new FormData();

document

.querySelector('#filepicker')

.addEventListener('change', function (event) {

const { files } = event.target;

Object.values(files).forEach(function (file, index) {

myformData.append(index, file);

});

document.querySelector('#send').addEventListener('click', function () {

axios({

method: 'post',

url: 'http://google.com',

data: myformData,

headers: { 'Content-Type': 'multipart/form-data' },

})

.then((response) => console.log(response))

.catch((err) => console.log(err));

});

</script>

</body>

</html>

反對回復 2023-03-24

收到一只叮咚

TA貢獻1821條經驗獲得超5個贊

我在我的 React Native 應用程序上遇到了這個問題。為了解決它，我必須將圖像路徑轉換為 blob。下面給出了我的句柄上傳功能的代碼。

const handleUpload = async () => {

if (selectedImage.localUri !== '') {

const image_uri = Platform.OS === 'ios' ? selectedImage.localUri.replace('file://', '') : selectedImage.localUri;

const response = await fetch(image_uri);

const blob = await response.blob();

const formData = new FormData();

formData.append('image', blob, "xray_image.jpg");

setLoading(true);

axios.post("https://...", formData)

.then((result) => {

console.log(result);

})

.catch((err) => {

console.log(err);

});

} else {

console.log("Select a file error message");

}

};

反對回復 2023-03-24

LEATH

TA貢獻1936條經驗獲得超7個贊

export async function uploadImages(files, userId) {

try {

const images = new FormData();

for(const file of files){

images.append("image", file);

}

const res = await ax.post(process.env.SERVER_URL + "/upload-images", {

images,

userId,

});

return "success"

} catch (err) {

return "error"

}

反對回復 2023-03-24

小唯快跑啊

TA貢獻1863條經驗獲得超2個贊

您必須將擴展名與名稱一起傳遞

files[1] && images.append("image", files[1], "custom-name.jpg");

反對回復 2023-03-24

4 回答
0 關注
336 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

無法在“FormData”上執行“追加”：參數 2 不是“Blob”類型

無法在“FormData”上執行“追加”：參數 2 不是“Blob”類型

4 回答

添加回答