Utilizo la API de búsqueda para enviar una solicitud de venta con imágenes, todo funciona hasta la imagen. Dice lo siguiente en los campos de la imagen:
Cannot read properties of undefined (reading 'value')Supongo que me estoy perdiendo algo.
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 }) }campos de entrada
<div> <input type="file" accept="image/*" name="neededimage" id="file" /> <input type="file" accept="image/*" name="wantedimage" id="file2"/> </div>Puede agregar el estado al archivo de almacenamiento y su función de cambio es algo así:
const [files, setFiles] = React.useState({ neededimage: '', wantedimage: '' }); const addImage = (e) => { setFiles((files) => { return { ...files, [e.target.name]: e.target.files[0] }; }); };Agregue onChange para sus entradas:
<form> <input type="file" accept="image/*" name="neededimage" id="file" onChange={addImage} /> <input type="file" accept="image/*" name="wantedimage" id="file2" onChange={addImage} /> </form> Y luego agregue files del estado a su formData .
Está tratando de acceder al valor, quizás lo que quería hacer es acceder a los archivos.
<div> <input type="file" accept="image/*" name="neededimage" id="file" /> </div> Con las etiquetas de entrada anteriores, puede acceder a la propiedad de los files , que es una matriz INMUTABLE.
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 }); }; Recuerde nuevamente que esta matriz es INMUTABLE, por lo tanto, no puede modificar el contenido directamente. Además e.target.files[0] se almacena como un búfer, por lo tanto, los datos devueltos son un búfer almacenado en formData .
Ahora, como dijiste, tienes varias input con las que lidiar, por lo que en esto es mejor crear un controlador de change y adjuntarlo a ambas entradas y usar un FormData externo para agregar.
<div> <input type="file" accept="image/*" name="neededimage" id="neededimage" /> <input type="file" accept="image/*" name="wantedimage" id="wantedimage" /> </div> const neededImage = document.getElementById('neededimage'); const wantedImage = document.getElementById('wantedimage'); const handleFiles = () => { const files = [...fileInput.files]; console.log(selectedFiles); } neededimage.addEventListener("change", handleFiles); wantedImage.addEventListener("change", handleFiles);Una cosa más, ya que desea cargar varios archivos, es mejor permitirlos todos en una sola entrada.
<div> <input type="file" multiple accept="image/*" name="images" id="images" /> </div> function uploadMultipleFiles() { const formData = new FormData(); const file = document.getElementById("images") // all uploaded files for (let i = 0; i < file.files.length; i++) { formData.append(`image-${i}`, file.files[i]); } }```