在 Laravel 中从 Vue 中检索文件答案

【问题标题】：Retrieve files from Vue in Laravel在 Laravel 中从 Vue 中检索文件
【发布时间】：2018-10-27 06:30:03
【问题描述】：

我使用 Vue 从我的前端上传文件到 Laravel 后端。

使用下面这个sn-p上传：

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])
   }
 }

当我想使用普通的 Laravel 请求文件帮助方法请求文件时，它什么也不返回，但是当我使用 dd($request->files) 时，它返回下面的详细信息。

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"
     }
    ]
  ]
 ]
}

我想要实现的基本就是把文件存到光盘里，把文件名存到数据库里。

【问题讨论】：

您正在通过 POST 请求发送文件。你不能只链接到 POST 请求以将文件保存到服务器吗？

标签： javascript laravel file-upload vue.js

【解决方案1】：

在你的控制器上试试这些：

$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);

然后在vue上可以获取url：

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)
       }

【讨论】：