[Vue warn]: ошибка в обработчике v-on: «InvalidStateError: была предпринята попытка использовать объект, который не является или больше не может использоваться» - PullRequest
0 голосов
/ 05 марта 2020

вот что я пытаюсь сделать: я хочу заполнить переменные данные базовыми 64 строками всех выбранных пользователем изображений для загрузки.

Где я стою: я могу сделать поле загрузки данных для одного изображения. Я также могу использовать несколько изображений, но получаю сообщение об ошибке для последнего файла в списке.

Получено сообщение об ошибке:

[Vue warn]: Ошибка в v -on обработчик: «InvalidStateError: была предпринята попытка использовать объект, который не является или более не пригоден для использования»

Вот код:

<template>
  <div id="Uploader">
    <input type="file" id="file" ref="file" v-on:change="handleFileChanges" multiple/>
    <button v-on:click="upload_picture">Submit</button>
    <img v-bind:src="'data:image/jpeg;base64,'+result" style="width:200px;height:200px;"/>  </div>
</template>

<script>

// import axios from 'axios';


export default {
  name: 'Uploader',

  data() {
    return {
      file: '',
      values: '',
      data: [],
    };
  },

  methods: {
    handleFileUpload() {
      [this.file] = this.$refs.file.files;
    },
    handleFileChanges(e) {
      const reader = new window.FileReader();
      console.log(e.target.files);
      const previewfile = (file) => {
        console.log(file.name);
        reader.onload = (event) => {
          this.data.push(event.target.result);
        };
        reader.readAsDataURL(file);
      };
      e.target.files.forEach(previewfile);
    },
    upload_picture() {
      console.log(this.data);
      // axios.post('http://0.0.0.0:9094/analyze',
      //   this.data,
      //   {
      //     headers: {
      //       'Content-Type': 'application/json',
      //     },
      //   }).then((response) => {
      //   console.log(response);
      //   this.result = response.data.blended_image;
      //   console.log('SUCCESS!!');
      // }).catch((error) => {
      //   console.log(error);
      //   console.log('FAILURE!!');
      // });
      [this.result] = this.data;
    },
  },
};
</script> ```

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...