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

<テンプレート>
 <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('成功');
    });
  },
 },
};
</スクリプト>

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コンポーネントの残り