Laravelで画像アップロードの条件分岐ができない

Question

ユーザーのプロフィール更新において、アイコン画像アップロードの処理をif文で条件分岐させようと思っています。
フロントをVue.jsで作成してaxiosでpostしています。

↓UserEdit.vue

<template>
  
  <div class="user-edit-page">

    <div class="user-edit">

      <div class="user-edit-box" v-if="form">

        <!-- トップ -->
        <div class="user-edit-top">
          プロフィール編集
        </div>

        <div class="user-edit-name-icon">

          <!-- アイコン -->
          <div class="user-edit-icon-name">

            <div class="user-edit-icon">

              <!-- アイコンのプレビュー削除ボタン -->
              <img v-if="url" class="user-edit-batsu-icon" :src="'../../../image/batsu.png'" @click="deletePreview">
              
              <!-- 元々のアイコン -->
              <img class="user-edit-icon-img" v-if="form.icon && !url" :src="form.icon">
              <!-- アイコンがない場合の仮画像 -->
              <img class="user-edit-icon-img" v-if="!form.icon && !url" :src="'../../../image/user.png'">
              <!-- アップロードしたアイコンのプレビュー -->
              <div v-if="url" class="preview" :style="{ backgroundImage: 'url(' + url + ')' }"></div>

            </div>

            <!-- アイコン画像アップロードボタン -->
            <div class="user-edit-icon-up">
              <label>
                <img class="image-icon" :src="'../../../image/image.png'">
                <input class="file-upload" type="file" ref="preview" @change="uploadIcon" accept="image/*">
              </label>
            </div>

            <!-- アイコン画像のエラーメッセージ表示 -->
            <div v-if="message" class="user-edit-error">
              {{ message }}
            </div>

          </div>

          <!-- 現在のユーザー名表示 -->
          <div class="user-edit-current-user-name">
            {{ form.name }}
          </div>

        </div>

        <!-- ユーザー名変更欄 -->
        <div class="user-edit-user-name">

          <label for="name">
            ユーザー名
          </label>

          <input type="text" id="name" v-model="form.name">

          <div v-if="errors.name" class="user-edit-error">
            {{ errors.name[0] }}
          </div>

        </div>

        <!-- 自己紹介文 -->
        <div class="user-edit-pr">

          <label for="pr">
            自己紹介
          </label>

          <textarea v-model="form.pr" id="pr"></textarea>

          <div v-if="errors.pr" class="user-edit-error">
            {{ errors.pr[0] }}
          </div>

        </div>

        <!-- 変更ボタン -->
        <div class="user-edit-modify-btn" @click="submit">
          変更
        </div>

        <!-- テスト -->
        <div class="user-edit-modify-btn" @click="checkForm">
          チェック
        </div>

      </div>

    </div>

  </div>

</template>


<script>
export default {
  data () {
    return {
      // 送信データ
      form: {
        id: null,
        icon_url: null,
        name: null,
        pr: null,
        // 新しいアイコン
        newIconImage: null,
      },
      errors: [],
      // プレビュー用データ
      url: '',
      // ここでだけ使うデータ
      message: '',
    }
  },

  methods: {
    // 画像の検証とプレビュー表示
    uploadIcon() {
      this.form.newIconImage = this.$refs.preview.files[0];
      if (!this.form.newIconImage.type.match('image.*')) {
        this.message = '画像ファイルを選択してください';
        this.form.newIconImage = null;
        return;
      }
      this.form.icon_url = null;
      this.url = URL.createObjectURL(this.form.newIconImage);
      this.$refs.preview.value = '';
      this.message = '';
      console.log(this.form.newIconImage);
      console.log(this.url);
    },
    // 画像のプレビュー削除
    deletePreview() {
      URL.revokeObjectURL(this.url);
      this.form.newIconImage = null;
      this.form.icon_url = null;
      this.url = '';
      console.log(this.form.newIconImage);
      console.log(this.form.icon_url);
      console.log(this.url);
    },
    // 変更を送信
    submit() {
      let data = new FormData();
      data.append('id', this.form.id);
      data.append('icon_url', this.form.icon_url);
      data.append('name', this.form.name);
      data.append('pr', this.form.pr);
      data.append('newIconImage', this.form.newIconImage);
      axios.post('/api/user/edit', data)
        .then(() => {
          this.$router.push({ name: 'user', params: { id: this.form.id }});
        }).catch((error) => {
          this.errors = error.response.data.errors;
        });
    },
  },

  mounted() {
    axios.get('/api/user')
      .then((res) => {
        console.log(res.data);
        this.$set(this.form, 'id', res.data.id);
        this.$set(this.form, 'icon', res.data.icon_url);
        this.$set(this.form, 'name', res.data.name);
        this.$set(this.form, 'pr', res.data.pr);
      });
  },
}
</script>

↓UserController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Validation\ValidationException;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use InterventionImage;

use App\User;
use Storage;


class UserController extends Controller
{
    // ユーザーのプロフィール更新
    public function update(Request $request)
    {
        $request->validate(User::$updateRules, User::$updateValMessages);

        $user = User::find(Auth::id());

        print_r($request->hasFile('newIconImage'));
        print_r($request->icon_url);

        // アイコン画像アップロードの処理
        if ($request->hasFile('newIconImage')) {
            // 画像を正方形にリサイズして保存
            $image = $request->file('newIconImage');
            InterventionImage::make($image)
                ->fit(200, 200)
                ->save($image);
            $path = Storage::disk('s3')->putFile('user_icon', $image, 'public');
            // 現在のアイコン画像の削除して新たに画像を保存
            Storage::disk('s3')->delete(parse_url($user->icon_url, PHP_URL_PATH));
            $user->icon_url = Storage::disk('s3')->url($path);
        } else if (!$request->icon_url) {
　　　　　　  // プロフィール更新ページで現在のアイコン画像を削除していた場合はuserのicon_urlをnullにする
            Storage::disk('s3')->delete(parse_url($user->icon_url, PHP_URL_PATH));
            $user->icon_url = null;
        } else {
            //その他の場合はそのまま
            $user->icon_url = $user->icon_url;
        }

        // ユーザー名と自己紹介文の更新
        $user->name = $request->name;
        $user->pr = $request->pr;

        $user->save();
    }
}

上のようにUserController.phpで、
$request->hasFile('newIconImage')が偽で
$request->icon_urlがnullの場合は、
上のelse ifのところの
「// プロフィール更新ページで現在のアイコン画像を削除していた場合はuserのicon_urlをnullにする」処理をさせたいのですが、実際にその場合で実行してみるとelse ifのとこの処理が行われず、その下のelseの処理が行われてしまいます。

試したこととしては、
「アイコン画像アップロードの処理」の直前でprint_rでそれぞれの値を確かめてみると、
$request->hasFile('newIconImage')は値なし、
$request->icon_urlはnullになっていました。

なぜelse ifのところの処理が呼ばれないのでしょうか？

ちなみに、アップロードの方はちゃんとできます。

Comments

[m.ts10806]

VIEWもご提示ください。

[izaya]

すみません、追記させていただきました！

[izaya]

もう一回変更しましたので、もし現在ご覧いただいているようでしたら画面をリロードしていただいてよろしいですか？

[m.ts10806]

あれ。Vue.jsですか。てっきり普通にBladeとLaravelだけかと。
それならタグも追加してもらった方がいいですね。
https://teratail.com/tags/Vue.js

[izaya]

あ、忘れてました！追加しておきました。
でも多分問題があるのはUserController.phpの方だけだと思うのですが。。

[m.ts10806]

いえ、nullならそもそもform側の設定とかあるかもしれないと思って。
Vueは分からないのですが、this.form.iconImageだけでファイルの実態ってとれるのかなぁという疑問はあります。
大抵.files[0]とかでとるので。
https://developer.mozilla.org/ja/docs/Web/Guide/Using_FormData_Objects
axiosも使ったことないですが、ファイル添付は別途処理が必要なように見えます。
https://r17n.page/2020/02/04/nodejs-axios-file-upload-api/

[izaya]

UserControllerの「 if ($request->hasFile('newIconImage')) 」のところで、
newIconImageにファイルが入っているときはちゃんと画像のアップロードはできるので、vueにおけるfiles[0]のところの処理は質問では省略させていただきました。。
ただ、「newIconImageにファイルが存在しているけど$request->icon_urlに値がない場合」にelse if の中の処理が呼ばれないんですよね。。
何か原因として考えられることってありますか？

[Lulucom]

> else if の中の処理が呼ばれない
通ってないこともprint_rで確認されたということでしょうか？
通ってないと思っていたけど実は通っていて、その2行で何か別の問題が起きているという可能性もあるのかなと思いました。

[izaya]

else if の中もprint_rで確認しましたが、通っていないようでした。
多分、if ()、else if ()、の()内の書き方に問題があるのでしょうが、いくら考えてもわかりませんでした。。
一応質問のUserEdit.vueの方に省略していた画像アップロードのメソッドも追記しておきました。
自分でも原因をもっとよく考えてみます。。

[Lulucom]

> $request->hasFile('newIconImage')は値なし、
> $request->icon_urlはnullになっていました。
print_r()の代わりにvar_dump()で再確認してみてはいかがでしょう。型も表示されますので。

[izaya]

わあ、なんということでしょう！
var_dumpで調べてみると、
$request->hasFile('newIconImage')はbool(false)、
$request->icon_urlはstring(4) "null"
となっていました。
vueの方ではnull型のnullで送信しているのに、Laravelで受信したらstring型の'null'になってしまっていたということですね！
ですので、UserController.phpの
else if (!$request->icon_url)
を、
else if ($request->icon_url = 'null')
としてやると、ちゃんとelse if の中身が呼ばれました。
今度からは何か検証する際にはvar_dumpをなるべく使うようにすべきということを今回学べました。
Lulucomさん本当にありがとうございました！
でもelse if ($request->icon_url = 'null')はあまり美しくないので修正すべきかもですね。

[m.ts10806]

＞else if ($request->icon = 'null')

これだと比較ではなく代入です。

[Lulucom]

少し解決に近づいたようで良かったです。掲載されたUserEdit.vueを拝見する限りでは'null'ではなくnullになっているようなので、まだそこが謎ですね・・・

[izaya]

@m.ts10806
あ、書き間違えました！「===」としても同じ結果となりました。
やはり$request->iconにはstring型の'null'が入っているようです。。

[izaya]

@m.ts10806
@Lulucom
バリデーションルールに
'icon_url' => 'nullable'
を設定すればひょっとして治るかもと思ったのですが、やはりまたstring型の'null'が入っているようでした。。
何はともあれ前進できてよかったです。お二方ご協力ありがとうございますm(__)m

[Lulucom]

> 掲載されたUserEdit.vueを拝見する限りでは'null'ではなくnullになっている
UserEdit.vueの掲載されていない部分で'null'を入れてしまっているということはないでしょうか。

[m.ts10806]

> としても同じ結果となりました。

いえ、結果というより見たまんま「それでは分岐の意味をなさない」という指摘です。

[izaya]

@m.ts10806
あ、
else if ($request->icon === 'null')
と修正して実行するとちゃんと分岐されてうまくいきます。「同じ結果になった」ではなくて「うまくいった」が正しかったですね。。ご指摘ありがとうございます。

[izaya]

@Lulucom
UserEdit.vueで略しているのはhtml部分だけですので、'null'をを代入しているはずはないと思うのですが。。
一応、UserEdit.vueで略していたところも質問の方に追記しました。う〜ん、どこで型変換が起こったんでしょう。。

[m.ts10806]

ただ「`null`という文字」に固定で置き換えるのは悪手ではないかと。

[izaya]

@m.ts10806
>「`null`という文字」に固定で置き換える
どこの部分でしょうか？
else if ($request->icon === 'null')
のところですか？

[Lulucom]

どうもFormDataにnullをセットしても内部で"null"になってしまうようですね。

[izaya]

@Lulucom
@m.ts10806
>どうもFormDataにnullをセットしても内部で"null"になってしまうようですね。
あ、それですね！FormDataの仕様の問題でしたか。ググり足りませんでした。。
ですから、UserEdit.vueのmethodsの「//変更を送信」のところの
data.append('icon_url', this.form.icon_url);
data.append('newIconImage', this.form.newIconImage);
を、
if (this.form.icon_url) {
data.append('icon', this.form.icon_url);
}
if (this.form.newIconImage) {
data.append('iconImage', this.form.newIconImage);
}
と修正してあげたら、$request->icon_urlにnull型のnullがちゃんと入っており、
else if (!$request->icon)
の条件分岐でうまくいきました！
これで全て解決したと思われます。お二方本当にありがとうございました。もっとリサーチ力をつけたいと思います。

[Lulucom]

よかったです、勉強になりました。

Answer 1

どうやら、FormDataはnullを送信できないため、null型のnullを送信しようとすると勝手にstring型の'null'に変換されてしまうようです。
ですから、
ですから、UserEdit.vueのmethodsの「//変更を送信」のところの

data.append('icon_url', this.form.icon_url);
data.append('newIconImage', this.form.newIconImage);

を、

if (this.form.icon_url) {
  data.append('icon', this.form.icon_url);
}
if (this.form.newIconImage) {
  data.append('iconImage', this.form.newIconImage);
}

と修正してあげたら、$request->icon_urlにnull型のnullがちゃんと入っており、
else if (!$request->icon)
の条件分岐でうまくいきました！