Vue.js 和 Laravel 8 API 图片上传抛出 500 错误

Question

下面是图片上传路径的代码；这是我的模板上传代码。

<div class="form-group">
    <div class="form-row">
        <div class="col-md-6">
            <input @change="onFileSelected" class="custom-file-input" type="file">
            <small class="text-danger" v-if="errors.photo"> {{errors.photo[0]}} </small>
            <label accept="image/*" class="custom-file-label" for="customFile" id="photo">Choose file</label>
        </div>
        <div class="col-md-6">
            <img :src="form.photo" style="height: 40px; width:40px;">
        </div>
    </div>
</div>

这是点击事件的函数；这是我要传递给 API.

的数据

ata() {
    return {
      form:{
        name: null,
        email: null,
        address: null,
        salary: null,
        joining_date: null,
        nid: null,
        phone: null,
        photo: null
      },
      errors: {
        
      }
    }
  },
  methods: {
      
      onFileSelected(event){
        // console.log(event)
        let file  = event.target.files[0];
        if(file.size > 1048770) {
          //  Notification.image_validation()
          Toast.fire({
          icon: 'error',
          title: 'upload image less than 1MB'
          })
        }else {
           //console.log(form)
          let reader = new FileReader();
          reader.onload = event =>{
            this.form.photo = event.target.result
            console.log(event.target.result)
          };
            reader.readAsDataURL(file)
        }
      },

以下是我推送约会对象的代码。

employeeinsert()
{
    console.log(this.form.photo)
    axios.post('/api/employee', this.form)
        .then(() => {
            // console.log(this.form)
            // this.$router.push({name: 'employee'})
            // Toast.fire({
            // icon: 'success',
            // title: 'employee add success'
            // })
        })
        .catch(error => this.errors = error.response.data.errors)
}

这些是 Laravel 8 后端验证。在这里我尝试获取请求图像和名称更改并尝试保存我的 public 文件夹。

if ($request->photo) {
    $position = strpos($request->photo, ';');
    $sub = substr($request->photo, 0, $position);
    $ext = explode('/', $sub)[1];

    $name = time() . "." . $ext;
    $img = Image::make($request->photo)->resize(240, 200);
    $upload_path = 'backend/employee';
    $inage_url = $upload_path . $name;
    $img->save($inage_url);

    return console . log($inage_url);

    Employee::insert([
        'name' => $request->name,
        'email' => $request->email,
        'address' => $request->address,
        'salary' => $request->salary,
        'joining_date' => $request->joining_date,
        'nid' => $request->nid,
        'phone' => $request->phone,
        'photo' => $last_image
    ]);

当我上传图片时，出现 500 错误。

这是任何日志的 500 错误。

我不知道为什么它会抛出 500。请帮助解决这个问题。

Answer 1

在您的代码中可以看到一些可能导致 500 错误的事情是

return console.log($inage_url): console.log() 是 javascript 而不是 PHP
$inage_url = $upload_path.$name; 应该是 $inage_url = $upload_path.'/'.$name 否则 $img->save($inage_url);可能会导致错误，因为路径格式不正确
不清楚“照片”中 $last_image 的来源 => $last_image

Vue.js 和 Laravel 8 API 图片上传抛出 500 错误

Vue.js with Laravel 8 API image upload throws 500 error

image-upload

http-status-code-500

laravel

vue.js

laravel-8