Laravelの画像アップロードバリデーション

Question

Laravel5で画像アップロードの実装を行っております。アップロードの際はVue.js + AxiosでAjax送信を行っております。
画像をアップロードするときに画像に対するRequiedバリデーションを設定していないにもかかわらずバリデーションが反応してしまうという現象があって、どん詰まりました。
PHP側で画像ファイルを受け取った際に、空のデータではなくゴミのようなデータが送信されてしまっているのかな。。。と思いいろいろデバックしてみましたが、$request->file('file0')自体は何も入っていないのですが、Validationは反応してしまっているのです。
こちら同じ現象に出くわした方いましたら、なにかしらご教授お願いしたいです。

fileバリデーションが反応しているので、何かしら壊れたデータ的なものが送信されてしまっていると思うのですが。。。Vue側でのデータはfile0: null,で初期化しています。

<div id="test">
        <input type=text v-model="name">
        <p>@{{error_message_name}}</p>
        <input @change="selected_file0" type="file" name="file0">
        <p>@{{error_message_file0}}</p>
        <input @change="selected_file1" type="file" name="file1">
        <p>@{{error_message_file1}}</p>
        <button type="button" @click="post($event)">Submit</button>
      </div>

      <script>
        var app = new Vue({
          el: '#test',
          data: {
            name: "default name",
            error_message_name: "",
            file0: null,
            file1: null,
            error_message_file0: "",
            error_message_file1: "",
          },
          methods: {
            selected_file0: function(event){
              event.preventDefault();
              // console.log(event.target.files);
              let files = event.target.files;
              this.file0 = files[0];
              console.log(this.file0);
            },
            selected_file1: function(event){
              event.preventDefault();
              // console.log(event.target.files);
              let files = event.target.files;
              this.file1 = files[0];
              console.log(this.file1);
            },
            post: function(){
              console.log("submit");
              
              let params = new FormData();
              params.append('name', this.name);
              params.append('file0', this.file0);
              params.append('file1', this.file1);
              params.append('_token', '{{csrf_token()}}');

              var config = {
                headers: {
                  'content-type': 'multipart/form-data'
                }
              };
              axios.post(
                '/v2/form/tutorial/store',
                params,
                config
              ).then(response => {
                if (response.status === 200) {
                  console.log(response);
                }
              }).catch(e => {
                console.log(e.response.data.errors.file0);
                console.log(e.response.data.errors.file1);
                console.log(e.response.data.errors.name);
                this.error_message_name = e.response.data.errors.name;
                this.error_message_file0 = e.response.data.errors.file0;
                this.error_message_file1 = e.response.data.errors.file1;
              });
            }
          }
        });
      </script>

public function tutorial_store(Request $request) {

  $this->validate($request, [
    'name' => 'required',
    'file0' => 'file|image|mimes:jpeg,gif,png|dimensions:min_width=100,min_height=100,max_width=3600,max_height=3600',
    'file1' => 'file|image|mimes:jpeg,gif,png|dimensions:min_width=100,min_height=100,max_width=3600,max_height=3600',
  ]);

  // なんか保存の処理
  $path = $request->file('file0')->store('public/pics');
  $path = $request->file('file1')->store('public/pics');

  return view("develop.form_tutorial_store");
}

Comments

[hentaiman]

同じ現象の人に回答希望ってこ事なので回答ではなくこっちに書きます。
問題が起きたら低レベルなコードに戻して問題の切り分けしましょう。
vueとかajaxとかを使わないで動作テストをしましょう。
素のhtmlでもvalidationが反応するならphpの問題です。
ajaxにした時にvalidationが反応するならjavascriptの問題です。
vueを組み込んだ時にvalidationが反応するならvueの問題です。

[m.ts10806]

https://teratail.com/questions/195178
新しい質問をたてるのではなく質問を編集してください。片方削除以来出しておいてくださいね

[osamuya]

vueとかajaxとかを使わないで動作テストでは問題ないです。jQueryでやっても問題なかったです。と考えるとVue.jsの問題なのかなぁというところまでは来てます。ただVue.jsでファイル送信時のデータの初期化というのがどこで行ってよいものなのかというのが全くわからないといったところです。

[osamuya]

すみません。二重投稿しておりました。1つ目は削除以来出しました。

[mikkame]

> fileバリデーションが反応しているので、何かしら壊れたデータ的なものが送信されてしまっていると思うのですが。。。

思う・・・じゃなくて
chromeのdeveloper consoleで確認すればいいのでは？

[hentaiman]

ぶっちゃけvue分からん自分が軽く見ただけでもnull送ってるからvalidation引っかかってんだろ程度には思う
mikkameさんの言う通り手間を惜しまずにデバッグをおすすめする
自分だったらまずはvalidation動かさない状態でphp側でログ出して確認する

[osamuya]

ログで出すと送信している値は空なのに、Validationにひっかかかっている状態ですね。。。デバック惜しんでいるのではなくて、だいたいすべてやってしまった感はあります。。

[hentaiman]

そしたらnullが送られているわけではないって事までは確認済みってことなのね

[osamuya]

chromeのdeveloper consoleでは当然、nullが入ってきます。送信すると$request->file('file0')は空です。（というのは上述の通りなのですが。。。）ここらが本当にわからないところでして。。
ちなみに、
file0: nullでは、バリデーションすべてが反応し、
file0: 0では、fileのバリデーションだけが反応し、
file0: ""では、バリデーションすべてが反応し、
file0: []では、fileのバリデーションだけが反応するといった感じです。
ここがなんとか確かな空にできないものかと。。

[hentaiman]

一番最初に回答に書こうと思ったことそのまんま書くけど
いらない要素ならそもそも送る必要がないのでajaxの送信データに含める必要がないのでfileの無いinputは消す事
nullを送っているように見えるので、それをしたいならvalidationでnullableをつけること
その代わりfileでnullが入ってる時の処理は追加する事

vueの問題ではなく作り方の問題だと思う

[mikkame]

> ここがなんとか確かな空にできないものかと。

とりあえず　if (this.file0) params.append('file0', this.file0);
ってすればいいんじゃない？

[osamuya]

> mikkameさん
解決しました。。これしきのことで結構時間かかってしまいました。正にif (this.file0) params.append('file0', this.file0);の追加と、
Laravelのコントローラ側の「$path = $request->file('file0')->store('public/pics');」がいけなかったようです。ここでも、
if ($request->file('file0')) {
$path0 = $request->file('file0')->store('public/pics');
}
というように中身を確認してから実行するとうまくいきました。
ありがとうございます。

Answer 1

コメント欄で既にnullableに関しての言及がありますが、
項目の値が空の場合に、その項目のバリデーションのルールを適用したくない時は、nullableを指定してください。
Laravel 5.8 バリデーション nullable

Laravel5.8のソースコード的には、以下あたりが関係します。
laravel isNotNullIfMarkedAsNullable