<p>Ich habe versucht, eine Bilddatei vom React-Frontend an den Server zu senden, aber die Datei wird nicht gesendet: </p> <p>Das ist mein Frontend-Code:</p> <pre class="brush:php;toolbar:false;">useEffect(()=>{ const getImage=async ()=>{ if(Datei){ const data=new FormData(); data.append("name",file.name); data.append("file",file); const Response=await API.uploadFile(data); post.picture=response.data; } } getImage(); },[Datei])</pre> <p>file ist der React-Status, der die hochgeladene Datei enthält</p> <p>Im onClick-Ereignis habe ich den Dateistatus mithilfe der setFile-Funktion aktualisiert: </p> <pre class="brush:php;toolbar:false;"><label htmlFor="fileInput"> <fontSize="large" color="action"/> hinzufügen </label> <Eingabe type="Datei" id="fileInput" style={{display:"none"}} onChange={(e)=>{ setFile(e.target.files[0]) } } /></pre> <p>Dies ist mein Backend-Endpunkt: </p> <pre class="brush:php;toolbar:false;">router.post("/file/upload",upload.single("file"),uploadImage);</pre> <p>Ich verwende Multer-Middleware: </p> <pre class="brush:php;toolbar:false;">multer aus „multer“ importieren; {GridFsStorage} aus „multer-gridfs-storage“ importieren; dotenv aus „dotenv“ importieren; dotenv.config(); const username=process.env.DB_USERNAME; const passwort=process.env.DB_PASSWORD; //Wir werden die Komponente GridFsStorage von multer-gridfs-storage verwenden, um Bilder/Dateien zu speichern const storage=new GridFsStorage({ //Die URL der Datenbank, in die die Datei hochgeladen wird url:`mongodb+srv://${username}:${password}@cluster0.xki5wr4.mongodb.net/blog? retryWrites=true&w=majority`, Optionen:{useNewUrlParser:true}, file:(request,file) => //Die Dateitypen, die wir akzeptieren const match=["image/png","image/jpg,image/jpeg"]; if(match.indexOf(file.memeType)===-1){ return `${Date.now()}-blog-${file.originalname}`; } //Wenn die Dateierweiterung übereinstimmt zurückkehren { BucketName:"Fotos", Dateiname:`${Date.now()}-blog-${file.originalname}` } } }) Standard-Multer({storage} exportieren);</pre> <p>Dies ist die Callback-Funktion</p> <pre class="brush:php;toolbar:false;">const url="http://localhost:8000"; export const uploadImage=(request,response)=>{ if(!request.file){ return Response.status(404).json({msg:"file notfound"}) } const imageUrl=`${url}/file/${request.file.filename}`; return Response.status(200).json({imageUrl}); }</pre> <p>Da ich API-Aufrufe über Axios Interceptor durchführe, habe ich auch den Header-Bereich aktualisiert Dies ist mein Header-Bereich: </p> <pre class="brush:php;toolbar:false;">headers:{ „Akzeptieren“: „application/json,form-data“, „Content-Type“: „application/json“, // 'Content-Type': 'multipart/form-data' // „Content-Type“: „‘application/x-www-form-urlencoded‘“ }</pre> <p>Immer wenn ich versuche, eine Datei hochzuladen, wird eine Fehlermeldung ausgegeben: Datei nicht gefunden</p> <p>Die Anfrage wurde gesendet und der Dateiname ist normal, aber die Datei wurde nicht gesendet</p>

if (match.indexOf(file.memeType) === -1) {
to
if (match.indexOf(file.mimetype) === -1) {

const match=["image/png","image/jpg,image/jpeg"];

to     
const match = ["image/png", "image/jpg", "image/jpeg"];

if (!request.file) {
    return response.status(400).json({ msg: "File not received" });
}

headers: {
    "Accept": "application/json",
    "Content-Type": "multipart/form-data"
}