React'te resim yüklemek, form veri değerlerini döndürmüyor
Resimleri yüklerken form veri değerleri almak istiyorum.
import React from "react";
import "./styles.css";
import { Upload, Button, Form } from "antd";
export default function App() {
const normFile = (e) => {
const fd = new FormData();
const getFileList = e.fileList.map((i) => {
return fd.append("upload", i.originFileObj);
});
console.log("formadata values", fd);
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
};
return (
<div className="App">
<div>
<Form name="form" className="form">
<Form.Item
name="upload"
className="upload"
valuePropName="fileList"
getValueFromEvent={normFile}
>
<Upload name="img" listType="picture">
<Button className="btn">upload images</Button>
</Upload>
</Form.Item>
</Form>
</div>
</div>
);
}
Erişmeye çalışıyorum, console.log("formadata values", fd);
orada hiçbir şey bulamıyorum.
Soru: Kodumu kullanarak form verilerini nasıl alabilirim?
demo:https://codesandbox.io/s/priceless-flower-82tbe?file=/src/App.js:0-883
Yanıtlar
FormData'daki değerleri görmek için aşağıdaki gibi döngü kullanmanız gerekir:
for (let value of fd.values()) {
console.log(value);
}
Ayrıca, anahtarı kullanarak belirli bir verinin değerini de görebilirsiniz:
console.log(fd.get('key'));
Ayrıca, birden çok dosyayı bir anahtarla (kodunuzda = "karşıya yükle") döngüye eklemeye dikkat edin, verileriniz geçersiz kılınacak ve yalnızca bir tanesi sonuna eklenecek, birden çok dosyayı []
adından sonra kullanmanız gereken bir girişle yüklemek için aşağıdaki gibi girdi sayısı:
const getFileList = e.fileList.map((i) => {
return fd.append("upload[]", i.originFileObj);
});