NuxtからLaravel apiへファイルのアップデートでcall to a member function getclientoriginalname() on null

Question

【状況】
nuxtからのapiリクエストで、以下エラーが出る（postmanでのapiリクエストの成功確認済み）

call to a member function getclientoriginalname() on null

【試したこと】
nuxt側

以下記事を参考にformタグを設置して、enctype属性を設定
Nuxt.jsで画像を含む投稿機能を作る

      <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>

以下記事を見ると、本来laravel側のフォームで指定する、enctype="multipart/form-data"をフォームに指定していないことがエラーの原因ではないかと記載されています。
Call to a member function getClientOriginalName() on null laravel
以下記事にあるように、inputタグのなかへの属性指定は見つけれたのですが、自分の場合、divタグでのドラッグ&ドロップを採用しています。
Nuxt.jsで画像を含む投稿機能を作る

【質問】
nuxtでのenctypeの指定方法を見つけられず。
そもそもこれが原因かは特定できていないのですがmmアドバイスいただけないでしょうかmm

laravel側
以下記事を参考にfile()関数を追記

Call to a member function getClientOriginalName() on null laravel
        // music_fileにファイル名をつけて保存
        $file_name = $request->file('music_file')->getClientOriginalName();
        $music_file->music_file = Storage::putFileAs('public',$request->music_file, $file_name);
        // cover_imagにファイル名をつけて保存
        $file_name = $request->file('cover_image')->getClientOriginalName();
        $music_file->cover_image = Storage::putFileAs('public',$request->cover_image, $file_name);

Answer 1

music_fileが送信されていないため、nullになるのだと思われます。
nuxt側がどうなっているかわかりませんが、最終的にフォームで送信しているようであれば
<input type="file">にファイルを含めて送信しましょう。

divでファイルを受け取って送信したいのであれば、

こちらのように、inputタグに動的にvalueをセットする

または、formで送信するのを諦めfetchにFormDataを使用してファイルを送信しましょう。

Comments

[tanoken729]

ありがとうございます。そもそもデータが送信できていないということですかね。。
一応以下で、dataに値が入っていることは確認できているのですがmm

```
console.log(this.musicFile)
console.log(this.musicFileName)
```

以下のようになっておりますmm
dataにファイルをセット
```
dropFile(event) {
this.files = [...event.dataTransfer.files]
}

```
apiにリクエスト
```
async uploadMusicFile () {
try{
await this.$axios.post('http://localhost:8000/api/musicFileUpload', {
musicFile: this.musicFile,
coverImages: this.coverImages,
musicFileName: this.musicFileName,
genre: this.genre,
emotion: this.emotion,
})
this.$router.push('/TopAfterLogin')

} catch(error){
console.log(error)
console.log(this.musicFile)
console.log(this.musicFileName)
}
},

```

[tanoken729]

fetchにFormDataを使用してファイルを送信
以下のようにやってみましたが、エラー変わらず・・

エラー
```
Symfony\Component\Debug\Exception\FatalThrowableError: Call to a member function getClientOriginalName() on null in file /var/www/html/src/app/Http/Controllers/MusicFileController.php on line
```
nuxt側コード
vue
```
async uploadMusicFile () {
let formData = new FormData();

// formData.append('file', {
// music_file: this.musicFile,
// cover_image: this.coverImages,
// title: this.musicFileName,
// genre: this.genre,
// emotions: this.emotion,
// }
// );
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)=>{
// エラー処理
});
}
```