如何在laravel vue中上传带有表单的单个文件

Question

我想上传带有其余表单数据的图像，但无法正常工作。

逻辑

1. 选择1张图片（不是多张图片）
2. 上传并更新数据库

代码

<form @submit.prevent="update" enctype="multipart/form-data">
//other inputs

  // file input    
  <b-form-file class="photo" id="photo" v-model="profile.photo" ref="fileinput" placeholder="Pilih sebuah gambar..." accept=".jpg, .png, .gif"></b-form-file>
  <b-button @click="clearFiles">Reset</b-button>

// other inputs
</form>

script 评论

export default {
        data() {
            return {
                info: {},
                profile: { // my form data
                    photo: '',
                    about: '',
                    website: '',
                    phone: '',
                    state: '',
                    city: '',
                    user_id: '',
                    csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                }
            }
        },
         methods: {
            clearFiles () { //reset button for file input
              this.$refs.fileinput.reset();
            },
            update() { // sending form data to back-end
                let user_id = this.user.id;
                let photo = this.profile.photo; // unable to send this file
                let about = this.profile.about;
                let website = this.profile.website;
                let phone = this.profile.phone;
                let state = this.profile.state;
                let city = this.profile.city;

                axios.post('/api/updateprofile/'+ user_id, {user_id, photo, about, website, phone, state, city} ).then((response) => {
                    $(".msg").append('<div class="alert alert-success" role="alert"><strong>Perfect!</strong> Your profile updated successfully.</div>').delay(1000).fadeOut(2000);
                    this.$router.push('/profile');
                });
                Vue.nextTick(function () {
                    $('[data-toggle="tooltip"]').tooltip();
                });
            }
        }
    }

controller

public function updateprofile(Request $request, $id)
    {
        $profile = Profile::where('user_id', $id)->first();

        $this->validate($request, array(
          // 'photo'=>'nullable',
          'about' => 'nullable',
          'website' => 'nullable',
          'phone' => 'nullable|numeric',
          'state' => 'nullable',
          'city' => 'nullable',
        ));


        $profile->about = $request->input('about');
        $profile->website = $request->input('website');
        $profile->phone = $request->input('phone');
        $profile->state = $request->input('state');
        $profile->city = $request->input('city');

        if ($request->hasFile('photo')) {
          $photo = $request->file('photo');
          $filename = 'user' . '-' . time() . '.' . $photo->getClientOriginalExtension();
          $location = public_path('images/');
          $request->file('photo')->move($location, $filename);
          $profile->photo = $filename;
        }
        dd($request->input('photo'));

        $profile->save();
        return response()->json($profile, 200);
    }

问题

出于测试目的，我创建了dd($request->input('photo'));，它返回了[]，这意味着我实际上并没有将文件输入数据发送到后端。

问题

1. 如何将文件发送到后端并保存？