axoisにFormDataを使ってArrayデータを送信する

画像ファイルと一緒にarrayデータを送信するときにハマった

axiosでのファイルの送信

axiosで画像データを送信するにはFromDataを使用する

    const params = {
      name: '名前'
      title: 'タイトル'
      image: '画像ファイル'
    }
    const formData = new FormData()
    Object.entries(params).forEach(([key, value]) => {
      formData.append(key, value)
    })

    await this.$axios.post(API_URL, formData, {
      headers: {
        'content-type': 'multipart/form-data'
      }
    })

arrayデータを追加して送信(失敗例)

以下のやり方だとArrayデータが正しく送信できない

    const params = {
      name: '名前'
      title: 'タイトル'
      image: '画像ファイル'
      tags: ['タグ1', 'タグ2'] // 追加
    }
    const formData = new FormData()
    Object.entries(params).forEach(([key, value]) => {
      formData.append(key, value)
    })

    await this.$axios.post(API_URL, formData, {
      headers: {
        'content-type': 'multipart/form-data'
      }
    })

arrayデータを追加して送信(成功例)

    const params = {
      name: '名前'
      title: 'タイトル'
      image: '画像ファイル'
      tags: ['タグ1', 'タグ2'] // 追加
    }
    const formData = new FormData()
    Object.entries(params).forEach(([key, value]) => {
      if (Array.isArray(value)) {
        value.forEach((v, i) => {
          formData.append(key + '[]', v)  // arrayデータを分割して入れ直す
        })
      } else {
        formData.append(key, value)
      }
    })

    await this.$axios.post(API_URL, formData, {
      headers: {
        'content-type': 'multipart/form-data'
      }
    })

formDataを使うと文字列として入れるようなので、Arrayだけじゃなくて、Objectを送信したい時も分割して入れよう！