VueJs отправка файлов на laravel (загрузка)

Question

Я пытаюсь загрузить несколько файлов, но я не знаю, что я делаю здесь неправильно. Возможно, я не передаю правильные файлы, или? Это работает нормально, когда отправляется только один файл, проблема заключается в изменении кода для нескольких файлов. (я тоже новичок в этом).

Вот мой код:

 methods: {
    onFileChange(e) {
      this.filename = "";
      var names;
      var link;
      var keys = Object.keys(e.target.files);
      console.log(e.target.files);
      this.numberOfFiles = keys.length;
      console.log("# of files:"+this.numberOfFiles);
      if (keys.length <= 1) {
        this.filename = e.target.files[0].name;
      } else {
        for (var i = 0; i < keys.length; i++) {
          if (e.target.files[i].size > 5000000) {
            console.log(e.target.files[i].name + " is too big.");
          } else {
            this.filename += e.target.files[i].name + ", ";

          }

        }
      }
      for (var i = 1; i <= this.numberOfFiles; i++) {
        this.file = e.target.files[i];
      }

      link = "localhost:8080/upload" + this.filename;

      console.log("names: "+names);


    },

    submitForm(e) {
      e.preventDefault();
      let currentObj = this;
      const config = {
        headers: {
          "content-type": "multipart/form-data",
          "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')
            .content
        }
      };

      let formData = new FormData();
      for (var i = 1; i <= this.numberOfFiles; i++) {
        formData.append('file['+i+']', this.file[i]);
        }

      //send upload request
      axios
        .post("/store_file", formData, config)
        .then(function(response) {
          currentObj.success = response.data.success;
          currentObj.failed = response.data.failed;
          currentObj.filename = "";
        })
        .catch(function(error) {
          currentObj.failed = "No file attached.";
          console.log("No file attached");
        });
    }
  }
};

вот шаблон html:

<template>
  <b-card class="card" style="margin-top: 50px;">
    <template>
      <div stlye="min-height: 100vh; width: 100%;">
        <Notification v-if="success !== ''" :text="success" />
        <Notification v-if="failed !== ''" :text="failed" />
      </div>
    </template>
    <div class="text-center">
      <h2>PDF upload</h2>
      <br />
      <div style="max-width: 500px; margin: 0 auto;">
        <form @submit="submitForm" enctype="multipart/form-data">
          <div class="input-group">
            <div class="custom-file">
              <input type="text" placeholder="Email" name="email" id="text" autocomplete="off" />
              <input
                type="file"
                name="filename[]"
                class="custom-file-input"
                id="inputFileUpload"
                multiple
                v-on:change="onFileChange"
              />
              <label class="custom-file-label" for="inputFileUpload"></label>
            </div>
            <div class="input-group-append">
              <input type="submit" class="btn btn-primary" value="Upload" />
            </div>
          </div>
          <br />
          <p v-if="filename !== ''" class="text-danger font-weight-bold">Selected: {{filename}}</p>
        </form>
      </div>
    </div>
  </b-card>
</template>

И это токовый выход:

Array
(
    [file] => Array
        (
            [1] => undefined
            [2] => undefined
            [3] => undefined
            [4] => undefined
        )

)

Answer 1

попробуйте так ... создайте массив вызовов файлов и попробуйте набрать sh каждый файл

v-on:change="onFileChange($event)"

onFileChange(e){
                Array.from( e.target.files).forEach(file => {
                    this.files.push(file);
                });

при передаче

let formData = new FormData();
this.files.forEach(function (file) {
   formData.append('files[]', file);
 });
},

Answer 2

При сохранении данных файла в свойстве file на каждой итерации вы сбрасываете предыдущее назначение, а не добавляете его в качестве элемента массива к file, поэтому вам следует его sh. Также начинайте итерацию с 0, а не с 1:

methods: {
  onFileChange(e) {
    this.filename = "";
    var names;
    var link;
    var keys = Object.keys(e.target.files);
    console.log(e.target.files);
    this.numberOfFiles = keys.length;
    console.log("# of files:" + this.numberOfFiles);
    if (keys.length <= 1) {
      this.filename = e.target.files[0].name;
    } else {
      for (var i = 0; i < keys.length; i++) {
        if (e.target.files[i].size > 5000000) {
          console.log(e.target.files[i].name + " is too big.");
        } else {
          this.filename += e.target.files[i].name + ", ";

        }

      }
    }
    for (var i = 0; i < this.numberOfFiles; i++) {
      this.file.push(e.target.files[i]); //push, don't assign 
    }

    link = "localhost:8080/upload" + this.filename;

    console.log("names: " + names);


  },

  submitForm(e) {
    e.preventDefault();
    let currentObj = this;
    const config = {
      headers: {
        "content-type": "multipart/form-data",
        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')
          .content
      }
    };

    let formData = new FormData();
    for (var i = 0; i < this.numberOfFiles; i++) {
      formData.append('file[' + i + ']', this.file[i]);
    }

    //send upload request
    axios
      .post("/store_file", formData, config)
      .then(function(response) {
        currentObj.success = response.data.success;
        currentObj.failed = response.data.failed;
        currentObj.filename = "";
      })
      .catch(function(error) {
        currentObj.failed = "No file attached.";
        console.log("No file attached");
      });
  }
}
};