通过 axios 发送文件到 laravel

Question

我正在使用 Quasar file picker 从用户那里捕获文件并使用 Axios 发送到 Laravel 控制器。当我将数据发送到 Laravel 控制器时，我收到一个空对象。请帮我解决这个问题！

Html :

<q-file
   v-model="file"
   accept=".jpg, .png, .jpeg"
   label="Select file"
/>

Js :

let config;
export default {
data() {
 return {
  file: null
},
methods: {
  send() {
    let data = new FormData();
    data.append('file', this.file);

    Http.post('api/create', data, config)
      .then(response => {
        console.log(response )
      })
      .catch(error => {
        console.log(error)
      });
   }
},
created() {
  config = {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  };
}

console.log(this.file,config); 的结果是：

File {name: "WhatsApp Image 2020-12-07 at 10.25.00 PM (2).jpeg", lastModified: 1607540162000, lastModifiedDate: Wed Dec 09 2020 22:26:02 GMT+0330 (Iran Standard Time), webkitRelativePath: "", size: 73419, …}
lastModified: 1607540162000
lastModifiedDate: Wed Dec 09 2020 22:26:02 GMT+0330 (Iran Standard Time) {}
name: "WhatsApp Image 2020-12-07 at 10.25.00 PM (2).jpeg"
size: 73419
type: "image/jpeg"
webkitRelativePath: ""
headers:
Content-Type: "multipart/form-data"

Answer 1

你非常接近。使用文件输入字段时，您不使用 v-model，因为文件的处理方式与普通数据略有不同。

而是监听文件输入的变化，然后创建多部分表单数据并发送到 laravel。

向您的输入添加一个更改事件以触发您的发送方法。 $event 值将包含我们需要的一切。 ($event 是一个特殊的变量，用于从字段中捕获事件数据)。

<q-file
   accept=".jpg, .png, .jpeg"
   label="Select file"
   @change="send($event)"
/>

然后稍微调整一下你的发送方式

export default {
  methods: {
    send(event) {
      // Don't go any further if no file was selected
      if (!event.target.files.length) return

      const data = new FormData();
      data.append('file', event.target.files[0]);

      Http.post('api/create', data, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
        .then(response => {
          console.log(response )
        })
        .catch(error => {
          console.log(error)
        });
    }
  }
}

您上传的文件将在 Laravel 中通过 $request->file('file');

提供

Answer 2

关于 laravel 控制器没有显示我在 return $request->all() 或 return $request()->files() 或 return $request->input('file) 中收到的文件。
我不知道它是关于 api 还是 laravel passport 但我将项目保存在项目目录中并完成！

通过 axios 发送文件到 laravel

Sending file via axios to laravel

laravel

vue.js

axios

multipartform-data

quasar-framework