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