我正在使用 ReactJs 并想使用 Axios 將資料發送到 Laravel API。
我試試
export const send = (data, File) => {
const formData = new FormData();
formData.append('media', File);
try {
PostRequest.post('/post', { formData, data })
.then(r => console.log(r.data))
.catch(e => console.log(e));
} catch (error) {
console.log(error);
}
};
我像這樣呼叫發送：
let data = {
mobile: mobile,
email: emailAddress,
userName: userName,
password: password,
firstName: firstName,
lastName: lastName,
website: website,
bio: bio,
date: selectedDay,
code: code,
};
console.log(profile);
console.log(data);
send(data, profile);
日志
但回應中的表單資料為空
我這樣設定標題：
headers: {
"Content-Type": "multipart/form-data",
"Accept":"application/json"
}
我也試試
const formData = new FormData();
formData.append('media', profile);
let data = {
mobile: mobile,
email: emailAddress,
userName: userName,
password: password,
firstName: firstName,
lastName: lastName,
website: website,
bio: bio,
date: selectedDay,
code: code,
media: formData,
};
send(data);
但媒體為空
uj5u.com熱心網友回復：
你可以有一個像這樣的上傳器，它可以使用;)
const Uploader = ({ url, updateData }) => {
function handleUpload(e) {
if (e.target.files[0]) {
console.log(e.target.files);
const formData = new FormData();
formData.append("config", e.target.files[0], e.target.files[0].name);
console.log(formData);
axios.post(url, formData).then(res => {
updateData(res);
});
}
}
return (
<label>
<div className={styles.uploaderBtn}>
<input
type="file"
style={{ display: "none" }}
onChange={e => {
handleUpload(e);
}}></input>
<img src={Upload} alt="" />
</div>
</label>
);
};
uj5u.com熱心網友回復：
問題根本不在于您的實施。您無法formData在控制臺中登錄并期望將其物體視為其他物件。
因此，formData控制臺上的空白是正確的行為。如果你真的想檢查你的formData，看看這篇文章。
因此，您的send方法作業正常并將正確的資料發送到服務器。
可選的
在服務端需要獲取formData并決議，所以必須在服務端實作。由于您需要獲取正文請求formData，因此您可以將所有資料附加data到 whitin a 中formData并發送一個formData，但它取決于后端實作，如果您可以更改服務器端，我鼓勵您將所有資料附加到在formData再發送。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/336596.html
標籤：javascript 反应 接口 公理
上一篇：當第一個fetch函式完成異步Javascript時，如何運行第二個fetch函式？
下一篇：如何滾動到部分但與頂部保持距離？