MERN プロジェクトのフロントエンド経由でサーバーにファイルを送信できない
<p>React フロントエンドからサーバーに画像ファイルを送信しようとしましたが、ファイルは送信されません: </p>
<p>これは私のフロントエンド コードです:</p>
<pre class="brush:php;toolbar:false;">useEffect(()=>{
const getImage=async ()=>{
if(ファイル){
const データ=新しい FormData();
data.append("名前",file.name);
data.append("ファイル",ファイル);
const 応答=await API.uploadFile(data);
post.picture=response.data;
}
}
getImage();
},[ファイル])</pre>
<p>file は、アップロードされたファイルを含む React ステートです</p>
<p>onClick イベントで、setFile 関数を使用してファイルのステータスを更新しました。</p>
<pre class="brush:php;toolbar:false;"><label htmlFor="fileInput">
<fontSize="large" color="action"/ を追加>
</ラベル>
<入力
type="ファイル"
id="ファイル入力"
style={{display:"none"}}
onChange={(e)=>{
setFile(e.target.files[0])
}
}
/>
<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;">multer から multer をインポート;
「multer-gridfs-storage」から {GridFsStorage} をインポートします。
「dotenv」から dotenv をインポートします。
dotenv.config();
const ユーザー名=プロセス.env.DB_USERNAME;
const パスワード=プロセス.env.DB_PASSWORD;
// multer-gridfs-storage のコンポーネント GridFsStorage を使用して画像/ファイルを保存します
const storage=new GridFsStorage({
// ファイルのアップロード先となるデータベースの URL
url:`mongodb srv://${ユーザー名}:${パスワード}@cluster0.xki5wr4.mongodb.net/blog?
retryWrites=true&w=majority`,
オプション:{useNewUrlParser:true}、
ファイル:(リクエスト,ファイル) => {
// 受け入れられるファイルの種類
const match=["画像/png","画像/jpg,画像/jpeg"];
if(match.indexOf(file.memeType)===-1){
return `${Date.now()}-blog-${file.originalname}`;
}
//ファイル拡張子が一致する場合
戻る {
バケット名:"写真",
ファイル名:`${Date.now()}-blog-${file.originalname}`
}
}
})
デフォルトのマルチターをエクスポート({ストレージ});</pre>
<p>これはコールバック関数です</p>
<pre class="brush:php;toolbar:false;">const url="http://localhost:8000";
エクスポート const UploadImage=(リクエスト,レスポンス)=>{
if(!リクエスト.ファイル){
return response.status(404).json({msg:"ファイルが見つかりません"})
}
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:{
"受け入れる": "application/json,form-data",
"コンテンツタイプ":"アプリケーション/json",
// 'Content-Type': 'multipart/form-data'
// "Content-Type": "'application/x-www-form-urlencoded'"
}</pre>
<p>ファイルをアップロードしようとすると、ファイルが見つからないというエラーがスローされます</p>
<p>リクエストは送信され、ファイル名は正常ですが、ファイルは送信されていません</p>
