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