无法仅在移动设备上上传图像 Laravel + Vue



我在堆栈上的一些帖子中读到了这个,但我仍然没有看到与我的相同的情况。我无法在手机设备上上传图像。我不明白为什么我没有控制台来查看错误。我将向您展示代码,以便有经验的人可以看到错误。

Laravel上传图片的代码:

public function uploadImage($car, $images)
{
    $fileName = Carbon::now()->timestamp . $images->getClientOriginalName();
    $path = $images->move(public_path('public/images'), $fileName);
    if (!$path) {
        return response()->json(['message' => 'An error has accured'], 500);
    }
    $carImage = new CarImages ([
        'path' => 'public/images/' . $fileName
    ]);
    $car->images()->save($carImage);
    return $carImage;
}

带有图像的商店表单的Laravel代码:

public function store(CarRequest $request)
{
    $file = null;
    if ($request->has('picture')) {
        $file = $request->file('picture');
    }
    $user = auth()->user();
    if ($user) {
        $car = Car::create([
            'car_type' => $request->input('car_type'),
            'mark' => $request->input('mark'),
            'model' => $request->input('model'),
            'user_id' => $user->id
        ]);
    }
    if (!$car) {
        return response()->json(['message' => 'Oooops, something went wrong'], 500);
    }
    if ($file) {
        $carImage = $this->uploadImage($car, $file);
    }
    Mail::to($user->email)->send(new NotifyNewCarUpload($user, $car));
    return response()->json([
        'message' => 'Your car has been successfully added',
        'car' => $car,
        'user' => $user
    ], 201);
}

在汽车请求上传汽车我有:

  'car_type' => 'required',
  'mark' => 'required',
  'model' => 'required',
  'picture' => 'required|image'

在 Vue 中.js插入我有的汽车:

 <form enctype="multipart/form-data" accept-charset="utf-8" 
 @submit.prevent="submit">
 ...
 ...
        <div class="col-3 insert-vehicle-right">
           <div :class="{ 'error': errors.has('file') }" v-if="!imgSrc" class="image-upload-holder"></div>
            <img :class="{ 'error': errors.has('file') }" v-if="imgSrc" class="uploaded-image" :src="imgSrc" alt="uploaded image"/>
              <div class="upload-btn-wrapper">
                <button class="btn action-btn">Upload Photo</button>
                <input name="file"
                       v-validate="'required'"
                       type="file"
                       @change="onFileChange"/>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <button type="submit" class="btn action-btn save-btn">Save</button>
            </div>
 </form>

Vue.js 用于上传和预览图像代码的 JavaScript 代码:

  onFileChange(event) {
    this.picture = event.target.files[0];
    const file = event.target.files[0];
    this.imgSrc = URL.createObjectURL(this.picture);
  },

我有用于发布该代码的表单数据代码:

 ...
 ...
formdata.append('picture', this.picture);

它不适用于手机。有人认出原因吗?我所有的照片都存储在 laravela 文件夹中 public/public/images,并且在网络浏览器(停止和笔记本电脑设备(上运行良好。我还有用于存储路径图像的表。仅适用于手机设备不起作用。帮助?

Okey问题出在php.ini配置操作和max_size_upload文件中。我只设置了超过 2mb 的图像文件并完美工作。@thanks拉莎

最新更新