Impossible d'envoyer des fichiers au serveur via le front-end dans le projet MERN

Question

J'ai essayé d'envoyer un fichier image au serveur depuis l'interface React, mais le fichier n'est pas envoyé :

Voici mon code frontal :

useEffect(()=>{
        const getImage=async ()=>{
            
            si(fichier){
              
              const data=nouveau FormData();
              data.append("nom",fichier.nom);
              data.append("fichier",fichier);
              
              
              const réponse = attendre API.uploadFile(data);
             

              post.picture=response.data;

            }
        }
        getImage();
        
    },[fichier])

file est l'état React qui contient le fichier téléchargé

Dans l'événement onClick, j'ai mis à jour l'état du fichier à l'aide de la fonction setFile :

<label htmlFor="fileInput">
    <Ajouter fontSize="large" color="action"/>
</étiquette>
       
<entrée
    type="fichier"
    id = "fileInput"
    style={{display:"aucun"}}
    onChange={(e)=>{
    setFile(e.target.files[0])
                
   }
  }
              
/></pré>
<p>Voici mon point de terminaison backend : </p>
<pre class="brush:php;toolbar:false;">router.post("/file/upload",upload.single("file"),uploadImage);

J'utilise le middleware multer :

importer multer depuis "multer" ;
importer {GridFsStorage} depuis "multer-gridfs-storage" ;
importer dotenv depuis "dotenv" ;

dotenv.config();

const username=process.env.DB_USERNAME ;
const password=process.env.DB_PASSWORD ;


//Nous utiliserons le composant GridFsStorage de multer-gridfs-storage pour stocker des images/fichiers

const storage=nouveau GridFsStorage({
    //L'URL de la base de données sur laquelle le fichier sera téléchargé
    url:`mongodb+srv://${username}:${password}@cluster0.xki5wr4.mongodb.net/blog?
    retryWrites=true&w=majority`,
    options :{useNewUrlParser:true},
    fichier :(demande,fichier) =>
        //Les types de fichiers que nous accepterons
        const match=["image/png","image/jpg,image/jpeg"];
        
        
        if(match.indexOf(file.memeType)===-1){
            return `${Date.now()}-blog-${file.originalname}` ;
        }
         
        //Si l'extension du fichier correspond
        retour {
            bucketName:"photos",
            nom de fichier :`${Date.now()}-blog-${file.originalname}`
        }
    }
})
exporter le multer par défaut ({stockage});
Il s'agit de la fonction de rappel
const url="http://localhost:8000";

export const uploadImage=(request,response)=>{
   
    
    si(!request.file){
        return réponse.status(404).json({msg:"fichier introuvable"})
    }
    
    
    const imageUrl=`${url}/file/${request.file.filename}`;
    
    return réponse.status(200).json({imageUrl});

}
Depuis que je fais des appels API via l'intercepteur axios, j'ai également mis à jour la section d'en-tête
Voici ma section d'en-tête : 
en-têtes :{
        "Accepter": "application/json,form-data",
        "Content-Type": "application/json",
        // 'Content-Type' : 'multipart/form-data'
        // "Content-Type": "'application/x-www-form-urlencoded'"
    }
Chaque fois que j'essaie de télécharger un fichier, une erreur s'affiche : fichier introuvable
La demande a été envoyée et le nom du fichier est normal, mais le fichier n'a pas été envoyé

Answer 1

Il y a plusieurs erreurs dans votre code. Corrigez ces erreurs et peut-être que le problème sera résolu :

Remplacement :

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

Remplacement :

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

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

Modifier le code de statut :

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

Remplacez l'en-tête par :

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