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