inputタグ×JS×axiosで画像データの取得からバックエンドへ送信まで

アジェンダ

• DB保存用の画像データを取得する
• フロントに表示する用の画像データを取得する
• 取得したデータをFormDataに格納する
• axiosの設定

DB保存用の画像データを取得する

addFile(event) {
  const file = event.target.files[0]
  this.book.image = file
}

event.target.files[0]

• このイベントの中のtarget. files[0]に添付したファイルデータが格納されている

フロントに表示する用の画像データを取得する

input type file でファイルを取得する

<input
  type="file"
  @change="addFile"
/>

addFile(event) {
  const file = event.target.files[0]
  this.book.image = file
  const reader = new FileReader()
  const self = this
  reader.onload = (e) => {
    self.imageForDisplay = e.target.result
  }
  reader.readAsDataURL(file)
}

const reader = new FileReader()

• FileReaderオブジェクトでファイルを読み込むため、FileReaderのインスタンスを生成しておく

FileReader - Web API | MDN

reader.onload = (e) => { self.imageForDisplay = e.target.result }

• onloadでイベントを読み込むようにしておく

reader.readAsDataURL(file)

指定された Blob オブジェクトを読み込みます。終了後の result プロパティには、ファイルのデータを示す data: URL が格納されます。

• reader.onload = (e) => { self.imageForDisplay = e.target.result }でスタンバイしていたイベントが発火される。readAsDataURLでイベントを発火させたため、eにはURLが入る。 （例readAsTextで読み取った場合）

取得したデータをFormDataに格納する

• 通常だとこのようにデータを格納するが

      const query = {
        keyword: this.searchWord,
        page: this.pageNationItems.currentPage
      }

• 今回'multipart/form-data',でデータを送信するため

    const formData = new FormData();
    formData.append('image', book.imageFile);
    formData.append('uid', localStorage.getItem('uid'));
    formData.append('artist_name', book.artistName);
    formData.append('title', book.title);

この様にFromDataオブジェクトにデータを格納する必要がある。そうしなければ送信出来ない。（それが明記してある記事を探したが、存在しなかった。そのため私の経験上の理論です。）

axiosの設定

      headers: {
        'content-type': 'multipart/form-data',
      },

• 今回はテキストデータとFileデータを送信するため、'content-type': 'multipart/form-data'をheaderに設定する必要がある

これでaxiosを使ってバックエンドへ送信可能になる。