Как загрузить несколько изображений / файлов с помощью форм-данных Javascript и Axios - PullRequest
Новая
       22

Как загрузить несколько изображений / файлов с помощью форм-данных Javascript и Axios

0 голосов
/ 21 ноября 2018

В приложении вы можете увидеть мой код.Я хочу, чтобы можно было отправлять больше изображений из одной отправки.Я использую Vue.js, Axios и Vanilla JS.В каком смысле?Мой текущий код работает отлично, и я хочу, чтобы таким способом было добавлено более одного изображения / файла, то есть изображения при отправке. 

<div @drop="onDropFile($event)">
<label> Choose or drag file </label>
<input
   type="file"
   name="profile_image"
   @change="onChangeFile($event)">
</div>


onDropFile(e) {
      e.stopPropagation();
      e.preventDefault();
      let files = e.dataTransfer.files;
      this.createFile(files[0]);
    },

onChangeFile(e) {
  let files = e.target.files;
  this.product_image_data = e.target.files[0]
  this.createFile(files[0]);
},
createFile(file) {
  if (!file.type.match("image.*")) {
    alert("Select an image");
    return;
  }
  let reader = new FileReader();
  let vm = this;
  reader.onload = function(e) {
    vm.profile_image = e.target.result;
  };
  reader.readAsDataURL(file);
},

1 Ответ

0 голосов
/ 21 ноября 2018

Вы можете проверить это laracast решение 

...
data() {
    return {
        postFormData: new FormData(),
    };
},

methods: {
    onFileChange(event) {
        let files = e.target.files;          
        this.postFormData.append('images[]',files[0]);
        this.createFile(files[0]);
    },
...
...