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をシンプルに学ぶ

推薦する

grep を使用して MySQL エラー ログ情報を取得する方法の詳細な説明

MySQL のメンテナンスを容易にするために、エラー情報を収集するためのインターフェースを提供するス...

MySQL 5.7 でルートパスワードを変更する方法に関するチュートリアル

バージョンアップデートにより、元のユーザーのパスワードフィールドがauthentication_st...

MySQL データベース開発仕様 [推奨]

最近、問題のある新しい SQL が本番データベースに入力される数を最小限に抑えるために、開発仕様を整...

mysql8.0.20 のデータディレクトリを移行する方法

mysql のデフォルトのストレージ ディレクトリは/var/lib/mysql/です。以下は、デフ...

初心者向けの MySQL のインストール方法 (効果が実証済み)

1. ソフトウェアのダウンロードMySQL のダウンロードとインストール:公式サイトのダウンロード...

Linux での sshd サービスとサービス管理コマンドの詳細な説明

sshd SSH は Secure Shell の略で、アプリケーション層のセキュリティ プロトコル...

momentJs を使用してカウントダウン コンポーネントを作成する (サンプル コード)

今日はvueとmomentで作ったカウントダウンを紹介したいと思います。具体的な内容は以下のとおりで...

Linux ディスクとディスク パーティションを理解するための記事

序文Linux システムのすべてのハードウェア デバイスは、ファイルの形式で表現され、使用されます。...

MySQLのあいまいクエリインデックスの失敗の問題を解決するいくつかの方法

% ワイルドカードを使用すると、インデックス失敗の問題が発生することがよくあります。ここでは、lik...

CSS3で実装された3Dトンネル効果

達成された効果実装コードhtml <div class="scene"&g...

React Native JSIはRNとネイティブ通信のサンプルコードを実装します

目次JSIとはJSIの違いiOS で JSI を使用するiOS 設定RN側の構成jsはパラメータ付き...

HTML_PowerNode 入門 Java アカデミー

HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 HTML ...

関連するプロパティのリストを含む HTML エリア イメージ ホットスポットの使用の概要

<area> タグは主にイメージマップで使用されます。イメージマップにアクティブ領域 (...

Vue2 と Vue3 でウォッチ リスナーを使用する方法

watch : データの変更を監視する(特定の値の変更イベント) vue2.x データ(){ 戻る ...

CentOS MySQLデータベースのスケジュールバックアップを実装する方法

次のスクリプトは、MySQLデータベース全体のスケジュールされたバックアップに使用されます。 mys...