вот что я пытаюсь сделать: я хочу заполнить переменные данные базовыми 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> ```