Es können keine Dateien über das Frontend im MERN-Projekt an den Server gesendet werden

Question

Ich habe versucht, eine Bilddatei vom React-Frontend an den Server zu senden, aber die Datei wird nicht gesendet:

Das ist mein Frontend-Code:

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])

file ist der React-Status, der die hochgeladene Datei enthält

Im onClick-Ereignis habe ich den Dateistatus mithilfe der setFile-Funktion aktualisiert:

<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])
                
   }
  }
              
/>

Dies ist mein Backend-Endpunkt:

router.post("/file/upload",upload.single("file"),uploadImage);

Ich verwende Multer-Middleware:

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);

Dies ist die Callback-Funktion

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});

}

Da ich API-Aufrufe über Axios Interceptor durchführe, habe ich auch den Header-Bereich aktualisiert Dies ist mein Header-Bereich:

headers:{
        „Akzeptieren“: „application/json,form-data“,
        „Content-Type“: „application/json“,
        // 'Content-Type': 'multipart/form-data'
        // „Content-Type“: „‘application/x-www-form-urlencoded‘“
    }

Immer wenn ich versuche, eine Datei hochzuladen, wird eine Fehlermeldung ausgegeben: Datei nicht gefunden

Die Anfrage wurde gesendet und der Dateiname ist normal, aber die Datei wurde nicht gesendet

Answer 1

您的代码有几个错误。修复这些错误，也许问题就会解决：

替换：

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"
}