MERN项目中无法通过前端向服务器发送文件
<p>我一直在尝试从React前端向服务器发送图像文件,但文件没有被发送:</p>
<p>这是我的前端代码:</p>
<pre class="brush:php;toolbar:false;">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])</pre>
<p>file是React状态,其中包含上传的文件</p>
<p>在onClick事件中,我使用setFile函数更新了文件状态:</p>
<pre class="brush:php;toolbar:false;"><label htmlFor="fileInput">
<Add fontSize="large" color="action"/>
</label>
<input
type="file"
id="fileInput"
style={{display:"none"}}
onChange={(e)=>{
setFile(e.target.files[0])
}
}
/></pre>
<p>这是我的后端端点:</p>
<pre class="brush:php;toolbar:false;">router.post("/file/upload",upload.single("file"),uploadImage);</pre>
<p>我正在使用multer中间件:</p>
<pre class="brush:php;toolbar:false;">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});</pre>
<p>这是回调函数</p>
<pre class="brush:php;toolbar:false;">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});
}</pre>
<p>由于我通过axios拦截器进行API调用,我还更新了头部部分
这是我的头部部分:</p>
<pre class="brush:php;toolbar:false;">headers:{
"Accept": "application/json,form-data",
"Content-Type":"application/json",
// 'Content-Type': 'multipart/form-data'
// "Content-Type": "'application/x-www-form-urlencoded'"
}</pre>
<p>每当我尝试上传文件时,它会抛出错误,文件未找到</p>
<p>请求已发送,文件名也正常,只是文件没有被发送</p>