Tidak dapat menghantar fail ke pelayan melalui bahagian hadapan dalam projek MERN

Question

Saya telah cuba menghantar fail imej ke pelayan dari bahagian hadapan React, tetapi fail itu tidak dihantar:

Ini ialah kod bahagian hadapan saya:

useEffect(()=>{
        const getImage=async ()=>{
            
            if(fail){
              
              const data=BorangData baharu();
              data.append("nama",file.name);
              data.append("fail",fail);
              
              
              respons const=menunggu API.uploadFile(data);
             

              post.picture=response.data;

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

fail ialah keadaan React yang mengandungi fail yang dimuat naik

Dalam acara onClick, saya mengemas kini status fail menggunakan fungsi setFile:

<label htmlFor="fileInput">
    <Tambah fontSize="large" color="action"/>
</label>
       
<masukan
    type="file"
    id="fileInput"
    style={{paparan:"tiada"}}
    onChange={(e)=>{
    setFile(e.target.files[0])
                
   }
  }
              
/></pra>
<p>Ini ialah titik akhir bahagian belakang saya: </p>
<pre class="brush:php;toolbar:false;">router.post("/file/upload",upload.single("file"),uploadImage);

Saya menggunakan multer middleware:

import multer daripada "multer";
import {GridFsStorage} daripada "multer-gridfs-storage";
import dotenv daripada "dotenv";

dotenv.config();

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


//Kami akan menggunakan GridFsStorage komponen multer-gridfs-storage untuk menyimpan imej/fail

storan const=GridFsStorage baharu({
    //URL pangkalan data yang mana fail akan dimuat naik
    url:`mongodb+srv://${username}:${password}@cluster0.xki5wr4.mongodb.net/blog?
    retryWrites=true&w=majoriti`,
    pilihan:{useNewUrlParser:true},
    fail:(permintaan,fail) =>
        //Jenis fail yang akan kami terima
        const match=["image/png","image/jpg,image/jpeg"];
        
        
        if(match.indexOf(file.memeType)===-1){
            kembalikan `${Date.now()}-blog-${file.originalname}`;
        }
         
        //Jika sambungan fail sepadan
        kembali {
            Nama baldi:"foto",
            nama fail:`${Date.now()}-blog-${file.originalname}`
        }
    }
})
eksport multer lalai({storage});</pra>
<p>Ini ialah fungsi panggil balik</p>
<pre class="brush:php;toolbar:false;">const url="http://localhost:8000";

eksport const uploadImage=(request,response)=>{
   
    
    if(!request.file){
        return response.status(404).json({msg:"fail tidak ditemui"})
    }
    
    
    const imageUrl=`${url}/file/${request.file.filename}`;
    
    return response.status(200).json({imageUrl});

}

Memandangkan saya membuat panggilan API melalui pemintas axios, saya turut mengemas kini bahagian pengepala Ini bahagian pengepala saya:

headers:{
        "Terima": "aplikasi/json,form-data",
        "Content-Type":"application/json",
        // 'Content-Type': 'multipart/form-data'
        // "Content-Type": "'application/x-www-form-urlencoded'"
    }

Setiap kali saya cuba memuat naik fail, ia menimbulkan ralat, fail tidak ditemui

Permintaan telah dihantar dan nama fail adalah biasa, tetapi fail itu belum dihantar

Answer 1

Terdapat beberapa ralat dalam kod anda. Betulkan ralat ini dan mungkin masalah akan diselesaikan:

Pengganti:

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

Pengganti:

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

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

Tukar kod status:

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

Ganti pengepala dengan:

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