MERN项目中无法通过前端向服务器发送文件
P粉993712159
2023-08-14 20:52:51
<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>
您的代码有几个错误。修复这些错误，也许问题就会解决：
替换：
if (match.indexOf(file.memeType) === -1) { to if (match.indexOf(file.mimetype) === -1) {替换：
更改状态码：
if (!request.file) { return response.status(400).json({ msg: "File not received" }); }替换头部为：
headers: { "Accept": "application/json", "Content-Type": "multipart/form-data" }