【音声ファイルアップロード機能】call to a member function getclientoriginalname() on n

2021/07/12に公開約4,600字

teratail質問

https://teratail.com/questions/349124

原因

music_fileが送信できていない?

new!!
cover_imageが送信できていないようだ(7/23)

 dd($request->file('cover_image')->getClientOriginalName());

Call to a member function getClientOriginalName() on null

対策

  • <input type="file">にファイルを含めて送信
  • inputタグに動的にvalueをセットし、divで受け取って送信
  • fetchにFormDataを使用してファイルを送信

<input type="file">にファイルを含めて送信

変わらず。
BeforeMusicUploadModal.vue
templete

<input type="file" @change="dropFile">

ファイルドロップ時のイベント

    dropFile(event) {
        this.files = event.dataTransfer.files
        console.log(this.files[0].name)
        // this.files.forEach(file => {
        //     let form = new FormData()
        //     form.append('file', file)
        //     this.$axios.post('http://localhost:8000//api/musicFileUpload', form).then(response => {
        //         console.log(response.data)
        //     }).catch(error => {
        //         console.log(error)
        //     })
        // })
        this.$emit('openAfterMusicUploadModal', this.files[0], this.files[0].name);
        this.isEnter = false;
    }

AfterMusicUploadModal.vue
templete

<input type="file" @change="dropFile">

ファイルアップロード

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

      formData.append('music_file', this.musicFile);
      formData.append('cover_image', this.coverImages);
      formData.append('title', this.musicFileName);
      formData.append('genre', this.genre);
      formData.append('emotions', this.emotion);

      let config = {
        // headers: {
        //     'content-type': 'multipart/form-data'
        // },
        method: "POST",
        body: formData
      };

      fetch("http://localhost:8000/api/musicFileUpload", config)
        .then((res)=>{
          return( res.json() );
        })
        .then((json)=>{
          // 通信が成功した際の処理
        })
        .catch((error)=>{
          // エラー処理
        });

    },

ファイルドロップ時のイベント

    dropFile(event) {
      this.coverImages = event.dataTransfer.files
      // console.log(this.coverImages)
      // console.log(this.musicFile)
      // console.log(this.musicFileName)
    },

inputタグに動的にvalueをセット?し、divで受け取って送信

今やってるやつ

BeforeMusicUploadModal.vue
templete

      <form method="post" enctype="multipart/form-data">
      <div class="drop_area" 
        @dragenter="dragEnter" 
        @dragleave="dragLeave" 
        @dragover.prevent 
        @drop.prevent="dropFile" 
        :class="{enter: isEnter}" 
      >
        <p>クリックしてファイルを追加</p>
        <p>最大100MB、形式: MP3, AAC</p>
        {{files.file}}
      </div>
      </form>

ファイルアップロード
同じ

ファイルドロップ時のイベント

    dropFile(event) {
        this.files = [...event.dataTransfer.files]
        console.log(this.files[0].name)
        // this.files.forEach(file => {
        //     let form = new FormData()
        //     form.append('file', file)
        //     this.$axios.post('http://localhost:8000//api/musicFileUpload', form).then(response => {
        //         console.log(response.data)
        //     }).catch(error => {
        //         console.log(error)
        //     })
        // })
        this.$emit('openAfterMusicUploadModal', this.files[0], this.files[0].name);
        this.isEnter = false;
    }

AfterMusicUploadModal.vue
templete

        <form method="post" enctype="multipart/form-data">
        <div>
          {{musicFile}}
          <h3>カバー画像</h3>
          <div class="drop_area" 
            @dragenter="dragEnter" 
            @dragleave="dragLeave" 
            @dragover.prevent 
            @drop.prevent="dropFile" 
            :class="{enter: isEnter}" 
          >
            <p>クリックして画像を追加</p>
            <p>10MB以内 .jpg .png .heic に対応しています。</p>
          </div>
          {{coverImages[0]}}
        </div>
        </form>

ファイルアップロード
同じ

ファイルドロップ時のイベント

    dropFile(event) {
      this.coverImages = [...event.dataTransfer.files]
      // console.log(this.coverImages)
      // console.log(this.musicFile)
      // console.log(this.musicFileName)
    },

参考

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

fetchにFormDataを使用してファイルを送信

参考

https://blog.katsubemakito.net/html5/fetch2

nuxt側でPOSTで送ってPUTに変換

https://qiita.com/kyohei121877/items/6cd8264f646bdf86cdb9

corsエラー発生

全てlaravel側で解除しているので、formdataの送信でheader情報を無駄に追加したから起きた?
いったん削除で解決

原因特定

new!!
cover_imageが送信できていないようだ(7/23)

 dd($request->file('cover_image')->getClientOriginalName());

Call to a member function getClientOriginalName() on null

どうすれば解決できる?

Discussion

ログインするとコメントできます