Retrieve files from Vue in Laravel

Question

I uploaded files from my frontend using Vue to Laravel backend.

Uploaded using this snippet below:

addPost() {
axios.post('api/submitPropertyPhoto?token=' + this.token, this.postFormData)
 .then(r => {
 console.log(r)
})
.catch(e => {
console.log(e)
 }
},
uploadFieldChange(e) {
  for(let key in e.target.files) {
  this.postFormData.append('images[]', e.target.files[key])
   }
 }

When I want to request the file using normal Laravel request file helper method it returns nothing but when I use dd($request->files) it returns the details below.

FileBag {#68
  #parameters: array:1 [
  "images" => array:1 [
  0 => array:1 [
    "name" => UploadedFile {#45
      -test: false
      -originalName: "error.JPG"
      -mimeType: "image/jpeg"
      -size: 21806
      -error: 0
      path: "C:\xampp\tmp"
      filename: "php639F.tmp"
      basename: "php639F.tmp"
      pathname: "C:\xampp\tmp\php639F.tmp"
      extension: "tmp"
      realPath: "C:\xampp\tmp\php639F.tmp"
      aTime: 2018-05-17 04:26:29
      mTime: 2018-05-17 04:26:29
      cTime: 2018-05-17 04:26:29
      inode: 0
      size: 21806
      perms: 0100666
      owner: 0
      group: 0
      type: "file"
      writable: true
      readable: true
      executable: false
      file: true
      dir: false
      link: false
      linkTarget: "C:\xampp\tmp\php639F.tmp"
     }
    ]
  ]
 ]
}

What I want to achieve basically is to save the file in the disc and the file name in the database.

You are sending the files via POST request. Can't you just chain to the POST request to save the files to the server? — flx
– flx, Commented May 17, 2018 at 5:21

train_fox · Accepted Answer · 2018-05-24 08:05:56Z

1

On your controller try these:

$urls = collect();
foreach ($request->images as $image) {
    $path = $image->store('images');
    // Store $path to your data base
    $urls->merge(Storage::url($path));
}
return response($urls);

Then on vue you can get urls:

addPost() {
    axios.post('api/submitPropertyPhoto?token=' + this.token,this.postFormData)
       .then(r => {
           console.log(r.data); // You should get a json of urls
       })
       .catch(e => {
           console.log(e)
       }

},

answered May 24, 2018 at 8:05

train_fox

1,5371 gold badge12 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Retrieve files from Vue in Laravel

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related