使用 Vue.js 在 Laravel 中上传多张图片

Question

我正在尝试在 Laravel 中使用 vue.js 上传图片，因为我正在使用此链接

https://jsfiddle.net/b412ruzo/

使用 vue.js 上传图片，当我提交表单时，我在文件数组中得到以下图片

现在的问题是我无法在 Laravel 控制器中获取此文件数组

当我打印

$request->file('files')

在我的控制器中，我变得空了。当我打印 $request->input('files') 这就是结果，一个空数组

非常感谢有关此问题的任何帮助。

代码片段：

data() {

     return {

    rawData: [],

    formData: new Form({

        files:[],

})

..

  const header = {

             Authorization: "Bearer " + this.token,

            };

  this.formData

        .post(APP_URL + `/api/post`, { headers: header })

        .then((response) => {

   }

Answer 1

不确定您可以通过以下方式发送ajax请求 this.formData.post尝试这个new Vue({  el: "#app",  data() {    return {      option: {        maxFileCount: 3      },      files:[],      rawData: [],    }  },  methods: {    loaddropfile: function(e) {        e.preventDefault()      e.stopPropagation()        alert('ok')        console.log(e)    },    openinput: function() {        document.getElementById("vue-file-upload-input").click();    },    addImage: function(e) {        const tmpFiles = e.target.files      if (tmpFiles.length === 0) {        return false;      }      const file = tmpFiles[0]      this.files.push(file)      const self = this        const reader = new FileReader()      reader.onload = function(e) {        self.rawData.push(e.target.result)      }      reader.readAsDataURL(file)    },    removeFile: function(index) {        this.files.splice(index, 1)      this.rawData.splice(index, 1)      document.getElementById("vue-file-upload-input").value = null    },    upload: function() {        alert('Check console to see uploads')        console.log(this.files)      axios.post(`${APP_URL}/api/post`,{files:this.files},{ headers: header })        .then((response) => {});    }  },  mounted(){  }})它会将您的表单数据发送到files密钥，以便您可以通过以下方式获取所有文件$request->file('files')