vue2 file api file uploading not works

I'm trying to make a image upload with vue2 and laravel5 REST Api. so that I tried to send the file to post method

HTML

<form @submit.prevent="addStaff">
    <div class="form-group">
              <div v-if="!staff.pic">
        <h2>Select an image</h2>
        <input type="file" @change="onFileChange">
      </div>
      <div v-else>
        <img :src="staff.pic" />
        <button @click="removeImage">Remove image</button>
      </div>
              </div>
<button type="submit">Submit</submit>
</form>

Here is my Client side code

handleFileUpload(e){

        this.staff.pic = e.target.files[0];
},

addStaff(){
fetch('api/staffprofile', {
          method: 'post',
          body: JSON.stringify(this.staff),
          headers: {
            'content-type': 'application/json'
          }
        })
          .then(res => res.json())
          .then(data => {
               console.log(res.data); 
}
    }

Here is my server side code

$image = $request->file('pic');

$filename = time() . '.' . $image->getClientOriginalExtension();
$location = public_path('img/staffpic/' . $filename);

Image::make($image)->resize(800, 400)->save($location);
$post->image = $filename;

When i'm trying to upload file with Postman it works but in case of posting data with on site it shows 500 error

any Help?

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2AurcCJ
via IFTTT