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

Question

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

https://jsfiddle.net/b412ruzo/

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

现在的问题是我无法在 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

不确定是否可以通过 this.formData.post 发送 ajax 请求

试试这个

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') 获取所有文件