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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

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

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

2873閲覧

Laravel 画像のアップロードができない

hiroki88

総合スコア66

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

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

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/02/16 16:48

(各バージョン)
laravel:6.18.40
PHP:7.2.31
nginx:1.19.0"

標題にある通り画像のアップロードを行いたいです。
調べたら色々とやり方が載っていたので参考にしながら下記のように行いました。
保存先は/storage/app/publicになります。

フロント側↓

vue

1<form class="form" enctype="multipart/form-data" @submit.prevent="register"> 2 <input type="file" name="product_img" class="form_file" accept=".png, .jpg, .jpeg" @change="onImgset"> 3</form> 4<script> 5data(){ 6 return{ 7 imgData: '' 8 } 9}, 10methods: { 11 //画像アップロード 12 async register(){ 13 const formData = new FormData(); 14 formData.append('file',this.imgData); 15 const response = await axios.post('/api/imgregister', formData); 16 }, 17 //画像選択時に動作 18 onImgset(e){ 19 this.imgData = e.target.files[0]; 20 } 21} 22</script>

ルーティング↓

php

1//画像登録 2Route::post('/imgregister', 'Auth\AdminProductController@imgRegister')->name('imgregister');

コントローラー↓

php

1public function imgRegister(Request $request){ 2 $file_name = $request->file->getClientOriginalName(); 3 $request->file->storeAs('/public',$file_name); 4 return $this->jsonResponse("OK"); 5}

上記の様にアップロードをした時に/storage/app/publicにアップロードした画像名でファイルは
生成されるのですが0バイトでデータがないものになってしまいました。
参考にした記事ではこれで上手くいっているのですが自分は上手くいきません。
コントローラーの処理で$request->fileの箇所を参考にした記事だと$request->file('inputのname')と
指定していましたが自分が行ったらnullで取得できなかったので$request->fileとしてあります。
何か原因が分かる方がいたらご教示お願いします。

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

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

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

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

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

Lulucom

2021/02/17 00:28 編集

ファイル名を英字だけのものにしてみたり、サイズが小さめのファイルにしてみると、何か変化はありますでしょうか? なお、以下については、「formData.append('file',this.imgData);」で 'file' という名前でセットしているためではないでしょうか。 > $request->file('inputのname')と指定していましたが自分が行ったらnullで取得できなかった
hiroki88

2021/02/17 04:47

ご回答いただきましてありがとうございます。 ファイル名は各日本語、英語、数字のみで試しましたが全て0バイトでした。 サイズについても20MB〜15KBで試しましたが0バイトでした。 そうなんですね、一応試しにformData.append('file',this.imgData)のfileを コントローラー側で$request->file("file")と指定して行ってみましたが0バイトでした。 /storage/app/publicにファイルは生成されてファイル名もアップロードしたものではあるのですが データが何もない状態です。
Lulucom

2021/02/17 04:54

imgRegisterメソッドの中で例えば以下のようなコードを入れてみると、何かエラーメッセージなどは表示されますか? if ( ! $request->file->isValid()) { dump($request->file->getErrorMessage()); }
hiroki88

2021/02/17 12:19

The file "test.jpg" exceeds your upload_max_filesize ini directive (limit is 0 KiB). 試したところ上記のエラーが表示されました。 upload_max_filesize iniの制限が0KBに設定されているみたいなエラーでしたので php.iniを確認したらupload_max_filesizeの設定値が数字だけになっておりました。。。 修正して再確認したところ無事登録できました! 初歩的なミスでした、お手数おかけしてしまい申し訳ありませんでした。 ただエラー内容を確認できたおかげで解決することができました! ありがとうございます!!!
hiroki88

2021/02/17 12:19

ベストアンサーにしたいのでお手数ですが回答の方にコメントを頂けると嬉しいです。
Lulucom

2021/02/17 12:21

なるほど、そんなこともあるのですね、よかったです。回答しておきます。
guest

回答1

0

ベストアンサー

アクションのメソッドの中で、一時的に以下のようなコードを入れてアップロードしてみてください。
何かエラーメッセージが表示されたら、それをもとに対処しましょう。

php

1if (! $request->file->isValid()) { 2 dump($request->file->getErrorMessage()); // for debug 3}

参考:

投稿2021/02/17 12:24

編集2021/02/17 12:43
Lulucom

総合スコア1899

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

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

Lulucom

2021/02/17 12:30

The file "test.jpg" exceeds your upload_max_filesize ini directive (limit is 0 KiB). 試したところ上記のエラーが表示されたとのこと。 php.iniを確認したらupload_max_filesizeの設定値が数字だけになってしまっていたので、修正したら問題が解消したとのことでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問