質問:Vue にブログ投稿をアップロードするためのフォームがあり、タイトル、本文、説明、スニペット、画像のスコープがあります。すべて必要です。これを処理するために Express で API を設定しました。 Postman でテストしたところ、問題なく動作しましたが、ブラウザ経由でファイルをデータベースに送信する方法がわかりません。 500 エラーが繰り返し発生し、データをコンソールに出力しても画像フィールドが空なので、それが問題であることは間違いないのですが、何が問題なのかがわかりません。 これは私のフロントエンドページの形式です: <テンプレート> <div class="コンテナ"> <div id="nav"> <adminnav/> </div> <div id="作成"> <h1>新しい投稿を作成</h1> </div> <div id="post"> <本文> <フォーム> <label for="title">タイトル: </label> <textarea v-model=formdata.title 行数="5" 列数="60" 名前="タイトル" placeholder="テキストを入力"> </テキストエリア> <br/> <label for="body">本文: </label> <textarea v-model=formdata.body 行数="5" 列数="60" 名前="本文" placeholder="テキストを入力"> </テキストエリア> <br/> <label for="description">説明: </label> <textarea v-model=formdata.description 行数="5" 列数="60" 名前="説明" placeholder="テキストを入力"> </テキストエリア> <br/> <label for="snippet">スニペット: </label> <textarea v-model=formdata.snippet 行数="5" 列数="60" 名前="スニペット" placeholder="テキストを入力"> </テキストエリア> <br/> <label for="file">写真をアップロード: </label> <入力 class="フォームコントロールファイル" タイプ="ファイル" accept="画像/*" v-bind="formdata.photo" /> <br/> <input id="submit" type="submit" value="submit" @click.prevent="createPost()"/> </フォーム> </本文> </div> </div> </テンプレート> <スクリプト> '../components/adminnav.vue' から adminnav をインポートします。 '../service/PostService' から PostService をインポートします。 エクスポートデフォルト{ 名前: 'createStory', コンポーネント: 管理者ナビ、 }, データ() { 戻る { フォームデータ: { タイトル: ''、 体: ''、 説明: ''、 スニペット: ''、 写真: null、 }, }; }, メソッド: { ポストを作成します(){ console.log(this.formdata); /* eslint 優先分割: 0 */ フォームデータ = this.formdata; PostService.createPost(フォームデータ) .then(() => { console.log('成功'); }); }, }, }; </スクリプト> これは POST リクエストです。 router.post("/add-story", upload.single('photo'), async(req, res) => { 試す{ post = new Post(); post.title = req.body.title; post.description = req.body.description; post.photo = 必要なファイルの場所; post.body = req.body.body; post.snippet = req.body.snippet; post.save() を待機します。 res.json({ ステータス: true、 メッセージ: 「正常に保存されました。」 }); } キャッチ(エラー) { res.status(500).json({ 成功: false、 メッセージ: エラーメッセージ }); } }); 回避策ファイル <input type="file" accept="image/*" class="form-control-file" @change="写真を更新($event.target.name、$event.target.files)" > すべてのデータを収集してリクエストを送信するコード // 残りのvueコンポーネントデータ(){ 戻る { タイトル: ''、 体: ''、 説明: ''、 スニペット: ''、 photo: {} // ファイルデータを保存します}; }, メソッド: { updatePhoto (ファイル) { if (!files.length) が返されます; //ファイルデータを保存する this.photo = { 名前: ファイル[0].名前、 データ: ファイル[0] }; }, ポストを作成します(){ formData を新しい FormData() にします。 formData.append('title', this.title); フォームデータを追加します。 formData.append('description', this.description); formData.append('スニペット', this.snippet); formData.append('photo', this.photo.data, this.photo.name); PostService.createPost(フォームデータ) .then(() => { console.log('成功'); }); } } // Vueコンポーネントの残り 明らかに、この質問とは無関係であると確信している vue コンポーネント構造全体や、リクエストを開始する前にファイル データが利用可能であることを確認するためのいくつかのチェックなど、多くのことを省略しました。これはファイル データを取得する方法についてのアイデアなので、この回答が参考になれば幸いです。 以上がVueフォームで画像を処理する方法の詳細です。Vueフォームで画像を処理する方法の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: 高同時実行シナリオにおける nginx 最適化の詳細な説明
3D座標の概念要素が回転すると、その座標軸も一緒に回転します。注 -y方向の問題立方体を回転させる効...
設定手順1. DNSが設定されているかどうかを確認するDNSが設定されていない場合は、前の記事を参照...
プロフェッショナルな Web デザインは複雑で時間がかかります。 HTML と CSS フレームワー...
CocosCreatorがスキルCD効果を実現多くのゲームにはスキルがあります。プレイヤーがスキルボ...
関数0. 現在の時刻を表示するコマンド: select now()。機能: 現在の時刻を表示します。...
コード <div class="test"> <div>...
目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...
序文:前の記事を読んだ後、binlog はデータベースで実行されたすべての DDL および DML ...
この記事では、主に、上下固定と中スライドレイアウトを実現するためのフレックスレイアウトのレイアウト方...
ページ上でショートカットキーをカスタマイズする要件に遭遇し、ショートカットキーを設定して表示する場所...
!DOCTYPE HTML ドキュメントが準拠するドキュメント型定義 (DTD) を指定します。 ...
フロントエンドのクロスドメイン問題に2日間近く悩まされましたが、ようやくngnxを使って解決したので...
コードをコピーコードは次のとおりです。 <span style="font-fami...
Centos システムの指定された場所に Nginx をインストールするにはどうすればいいですか?は...
画像をプルする docker pull season/fastdfs:1.2トラッカーを開始 doc...