我使用 fetch API 發送帶有影像的 put 請求，一切正常，直到影像。它在影像欄位上說以下內容：
Cannot read properties of undefined (reading 'value')
我想我錯過了一些東西。
const createPost = async (e) => {
e.preventDefault();
let formData = new FormData()
formData.append("author", userid)
formData.append("needed_image", e.target.neededimage.value)
formData.append("wanted_image", e.target.wantedimage.value)
const response = await fetch('http://127.0.0.1:8000/api/createpost/', {
method: "POST",
body: formData
})
}
輸入欄位
<div>
<input type="file" accept="image/*" name="neededimage" id="file" />
<input type="file" accept="image/*" name="wantedimage" id="file2"/>
</div>
uj5u.com熱心網友回復：
您正在嘗試訪問價值，也許您想做的是訪問檔案。
<div>
<input type="file" accept="image/*" name="neededimage" id="file" />
</div>
使用上述輸入標簽，您可以訪問files作為 IMMUTABLE 陣列的屬性。
const createPost = async (e) => {
e.preventDefault();
let formData = new FormData();
formData.append("needed_image", e.target.files[0]);
const response = await fetch('http://127.0.0.1:8000/api/createpost/', {
method: "POST",
body: formData
});
};
再次記住，這個陣列是不可變的，因此你不能直接修改內容。也e.target.files[0]存盤為緩沖區，因此回傳的資料是存盤在formData.
uj5u.com熱心網友回復：
您可以添加狀態來存盤檔案和更改功能，如下所示：
const [files, setFiles] = React.useState({
neededimage: '',
wantedimage: ''
});
const addImage = (e) => {
setFiles((files) => {
return { ...files, [e.target.name]: e.target.files[0] };
});
};
為您的輸入添加 onChange：
<form>
<input
type="file"
accept="image/*"
name="neededimage"
id="file"
onChange={addImage}
/>
<input
type="file"
accept="image/*"
name="wantedimage"
id="file2"
onChange={addImage}
/>
</form>
然后files從 state追加到 you formData。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/375418.html
標籤：javascript 反应 表单数据