Mi aplicación usa React en el frontend y FastAPI en el backend.
Estoy intentando subir un archivo csv a mi servidor.
Al enviar un formulario, esto se llama:
const onSubmit = async (e) => { e.preventDefault(); const formData = new FormData(); formData.append("file", file); fetch("/api/textitems/upload", { method: "POST", body: formData, }); };Los datos son recibidos por:
@app.post('/api/textitems/upload') def upload_file(csv_file: UploadFile = File(...)): dataframe = pd.read_csv(csv_file.file) return dataframe.head() Sigo recibiendo INFO: 127.0.0.1:0 - "POST /api/textitems/upload HTTP/1.1" 422 Unprocessable Entity .
Puedo realizar con éxito la solicitud de publicación con curl así:
curl -X POST "http://localhost:8000/api/textitems/upload" -H "accept: application/json" -H "Content-Type: multipart/form-data" -F "csv_file=@exp_prod.csv;type=text/csv"
¿Algún consejo sobre dónde me estoy equivocando al usar Javascript?
¡Asegúrese de que el nombre del archivo en el formulario coincida con el nombre del archivo en el parámetro!
Vea mi respuesta a la misma pregunta a continuación.
Cómo enviar un archivo al punto final de fastapi usando cartero
Eventualmente resolví esto. La respuesta de Isabi me ayudó, al igual que aprender sobre el método de adición de FormData . Aquí están los fragmentos de código de trabajo en caso de que alguien los encuentre útiles.
const onSubmit = async (e) => { e.preventDefault(); const formData = new FormData(); formData.append("file", file, file.name); await fetch(`/api/textitems/upload`, { method: "POST", body: formData, }) @app.post('/api/textitems/upload') def upload_file(file: UploadFile = File(...), db: Session = Depends(get_db)): df = pd.read_csv(file.file).head() return dfEstablezca el encabezado Content-Type en multipart/form-data en su solicitud:
const onSubmit = async (e) => { e.preventDefault(); const formData = new FormData(); formData.append("file", file); fetch("/api/textitems/upload", { method: "POST", body: formData, headers: { 'Content-Type': 'multipart/form-data', } }); };