Vueフォームで画像を処理する方法

Vueフォームで画像を処理する方法

質問:

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>changeイベントを監視してみましょう。これにより、各ユーザーのアップロード動作によってupdatePhotoメソッドがトリガーされ、ファイル データがthis.photoに保存されるようになります。

<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の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue+elementUI はフォームと画像のアップロードおよび検証機能の例を実装します
  • 写真をアップロードするための Vue axios フォーム送信例
  • vue を使用して画像アップロードフォームを構築する

<<:  高同時実行シナリオにおける nginx 最適化の詳細な説明

>>:  MySQLをシンプルに学ぶ

推薦する

CSS3 回転キューブ問題の詳細な説明

3D座標の概念要素が回転すると、その座標軸も一緒に回転します。注 -y方向の問題立方体を回転させる効...

LinuxにMySQLをインストールし、外部ネットワークアクセスを構成する例

設定手順1. DNSが設定されているかどうかを確認するDNSが設定されていない場合は、前の記事を参照...

ベスト HTML/CSS デザインおよび開発フレームワーク 15 選を紹介します

プロフェッショナルな Web デザインは複雑で時間がかかります。 HTML と CSS フレームワー...

CocosCreatorがスキル冷却効果を実装

CocosCreatorがスキルCD効果を実現多くのゲームにはスキルがあります。プレイヤーがスキルボ...

便利でシンプルなMySQL関数10個

関数0. 現在の時刻を表示するコマンド: select now()。機能: 現在の時刻を表示します。...

Dockerコンテナを使用する簡単な例

目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...

MySQL binlog_ignore_dbパラメータの具体的な使用法

序文:前の記事を読んだ後、binlog はデータベースで実行されたすべての DDL および DML ...

フレックスレイアウトは、上下固定、中間スライドのレイアウトモードを実現します。

この記事では、主に、上下固定と中スライドレイアウトを実現するためのフレックスレイアウトのレイアウト方...

Vueはキー表示のショートカットキー効果を取得する入力コンポーネントを実装します

ページ上でショートカットキーをカスタマイズする要件に遭遇し、ショートカットキーを設定して表示する場所...

DHTML オブジェクト (さまざまな HTML オブジェクトの共通プロパティ)

!DOCTYPE HTML ドキュメントが準拠するドキュメント型定義 (DTD) を指定します。 ...

Nginx がフロントエンド リソースへのクロスドメイン アクセスの問題をどのように解決するかの詳細な説明

フロントエンドのクロスドメイン問題に2日間近く悩まされましたが、ようやくngnxを使って解決したので...

システム外のフォント参照とトランジション効果

コードをコピーコードは次のとおりです。 <span style="font-fami...

Centos システムの指定された場所に Nginx をインストールする方法

Centos システムの指定された場所に Nginx をインストールするにはどうすればいいですか?は...

DockerにFastDFSをインストールする方法

画像をプルする docker pull season/fastdfs:1.2トラッカーを開始 doc...