<p>J'ai essayé d'envoyer un fichier image au serveur depuis l'interface React, mais le fichier n'est pas envoyé : </p> <p>Voici mon code frontal :</p> <pre class="brush:php;toolbar:false;">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])</pre> <p>file est l'état React qui contient le fichier téléchargé</p> <p>Dans l'événement onClick, j'ai mis à jour l'état du fichier à l'aide de la fonction setFile : </p> <pre class="brush:php;toolbar:false;"><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);</pre> <p>J'utilise le middleware multer : </p> <pre class="brush:php;toolbar:false;">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});</pré> <p>Il s'agit de la fonction de rappel</p> <pre class="brush:php;toolbar:false;">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}); }</pré> <p>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 : </p> <pre class="brush:php;toolbar:false;">en-têtes :{ "Accepter": "application/json,form-data", "Content-Type": "application/json", // 'Content-Type' : 'multipart/form-data' // "Content-Type": "'application/x-www-form-urlencoded'" }</pré> <p>Chaque fois que j'essaie de télécharger un fichier, une erreur s'affiche : fichier introuvable</p> <p>La demande a été envoyée et le nom du fichier est normal, mais le fichier n'a pas été envoyé</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"
}