MERN專案中無法透過前端向伺服器傳送文件

Question

我一直在嘗試從React前端向伺服器發送映像文件，但文件沒有被發送：

這是我的前端程式碼：

useEffect(()=>{
        const getImage=async ()=>{
            
            if(file){
              
              const data=new FormData();
              data.append("name",file.name);
              data.append("file",file);
              
              
              const response=await API.uploadFile(data);
             

              post.picture=response.data;

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

file是React狀態，其中包含上傳的檔案

在onClick事件中，我使用setFile函數更新了檔案狀態：

<label htmlFor="fileInput">
    <Add fontSize="large" color="action"/>
</label>
       
<input
    type="file"
    id="fileInput"
    style={{display:"none"}}
    onChange={(e)=>{
    setFile(e.target.files[0])
                
   }
  }
              
/>

這是我的後端端點：

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

我正在使用multer中間件：

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

dotenv.config();

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


//我們將使用multer-gridfs-storage的元件GridFsStorage來儲存圖片/文件

const storage=new GridFsStorage({
    //檔案將上傳到的資料庫的URL
    url:`mongodb srv://${username}:${password}@cluster0.xki5wr4.mongodb.net/blog?
    retryWrites=true&w=majority`,
    options:{useNewUrlParser:true},
    file:(request,file) => {
        //我們將接受的檔案類型
        const match=["image/png","image/jpg,image/jpeg"];
        
        
        if(match.indexOf(file.memeType)===-1){
            return `${Date.now()}-blog-${file.originalname}`;
        }
         
        //如果檔案副檔名匹配
        return {
            bucketName:"photos",
            filename:`${Date.now()}-blog-${file.originalname}`
        }
    }
})
export default multer({storage});

這是回呼函數

const url="http://localhost:8000";

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

}

由於我透過axios攔截器進行API調用，我還更新了頭部部分 這是我的頭部部分：

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

每當我嘗試上傳文件時，它會拋出錯誤，文件找不到

請求已發送，文件名也正常，只是文件沒有被發送

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