質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

1回答

2003閲覧

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

tanoken729

総合スコア1

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2021/07/12 15:13

編集2022/01/12 10:55

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

call to a member function getclientoriginalname() on null

【試したこと】
nuxt側

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

vue

1 <form method="post" enctype="multipart/form-data"> 2 <div class="drop_area" 3 @dragenter="dragEnter" 4 @dragleave="dragLeave" 5 @dragover.prevent 6 @drop.prevent="dropFile" 7 :class="{enter: isEnter}" 8 > 9 <p>クリックしてファイルを追加</p> 10 <p>最大100MB、形式: MP3, AAC</p> 11 {{files.file}} 12 </div> 13 </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()関数を追記

php

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

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

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

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

投稿2021/07/13 13:04

mikkame

総合スコア5036

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tanoken729

2021/07/14 14:32 編集

ありがとうございます。そもそもデータが送信できていないということですかね。。 一応以下で、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

2021/07/19 04:04

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)=>{ // エラー処理 }); } ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問