带有 Laravel 8 API 图像上传的 Vue.js 抛出 500 错误答案

【问题标题】：Vue.js with Laravel 8 API image upload throws 500 error带有 Laravel 8 API 图像上传的 Vue.js 抛出 500 错误
【发布时间】：2021-03-24 12:22:07
【问题描述】：

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

<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 后端验证。在这里我尝试获取请求图像和名称更改并尝试保存我的公用文件夹。

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。请帮助解决这个问题。

【问题讨论】：

你如何检查你的错误日志，看看它为什么会抛出 500 内部服务器错误
不知道为什么是 500 但我可以确保我的数据库和其他配置是正确的
在您的代码中可见可能导致 500 错误的几件事是 - 1：return console.log($inage_url) console.log 是 javascript 而不是 php，2：$inage_url = $upload_path.$name; 它应该是 $inage_url = $upload_path。 /'.$name 否则$img->save($inage_url); 可能会导致错误，因为路径格式不正确，3：不清楚 $last_image 来自'photo' => $last_image
@Donkarnash 谢谢你的决心添加这个作为答案我接受
@Anonymousshooter 完成 - 为了后续访问者的利益，添加为答案

标签： laravel vue.js laravel-8 image-upload http-status-code-500

【解决方案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 来自 in'photo' => $last_image

【讨论】：