🎉

【音声ファイルアップロード機能】filesオブジェクトからを配列を指定してformDataのパラメータにセット（アップロード成功）

2021/07/29に公開

consoleで以下エラーが出てた

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    at Function.r (<anonymous>:1:83)

原因

filesオブジェクトは本来複数のファイルを配列として、オブジェクトに格納して同時にアップロードできる
laravelのapi側がそれを想定してなくてエラーが出てた

解決

filesオブジェクトからを配列を指定してformDataのパラメータにセットする

    async uploadMusicFile () {
      let formData = new FormData();

      formData.append('music_file', this.musicFile);
      formData.append('cover_image', this.coverImages[0]); // ここ
      formData.append('title', this.musicFileName);
      formData.append('genre', this.genre);
      formData.append('emotions', this.emotion);
      formData.append('user_id', '0'); //後にauthのidをセットする

      let config = {
        headers: {
            'content-type': 'multipart/form-data',
            // 'Access-Control-Allow-Origin': '*',
            // 'Access-Control-Allow-Headers': '*',
            'contentType': false,
            'processData': false
        },
      };

      await this.$axios.post('api/musicFileUpload', formData, config)
      .then(res => {
        console.log(res)
        this.posts = res.data.posts
        console.log(this.posts)
        this.closeAfterMusicUploadModal()
        location.reload();
      })
      .catch(err => {
        console.log(err)
      })
    },

無事アップロード成功

参考

原因

解決

Discussion