TypeError: "установка свойства только для получателя vuejs axios

Question

Что я пытаюсь сделать: взять изображение как ввод. Преобразуйте его в строку base64. Подготовьте полезную нагрузку, содержащую строку base64, и отправьте бэкэнд с этим пост-запросом. Получите данные ответа, предварительно просмотрите изображение base64 из объекта ответа.

Когда я запускаю код, я получаю следующую ошибку внутри ax ios request:

TypeError: "настройка свойства только для получателя" result ""

FYI, console.log(response) печатает успешно, и я вижу данные ответа. Однако console.log('SUCCESSFUL') не печатается из-за ошибки

<template>
  <div id="Uploader">
    <input type="file" id="file" ref="file" v-on:change="handleFileChanges" multiple/>
    <button v-on:click="upload_picture">Submit</button>
    <div> Hello {{result}}</div>
  </div>
</template>

<script>

import axios from 'axios';


export default {
  name: 'Uploader',

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

  methods: {
    handleFileUpload() {
      [this.file] = this.$refs.file.files;
    },
    handleFileChanges(e) {
      const reader = new window.FileReader(); // if window i
      // s not used it says File READER is not defined
      reader.onload = function oldyfunt(event) {
        // dispatch fileAttached to state UI postEditor with event.target.result as read dataURL
        this.values = event.target.result;
        console.log('VALUES');
        console.log(this.values);
        const data = {
          images: {
            image1: this.values.split(',')[1],
          },
        };
        axios.post('http://0.0.0.0:9094/analyze',
          data,
          {
            headers: {
              'Content-Type': 'application/json',
            },
          }).then((response) => {
          console.log(response);
          this.result = response.data;
          console.log('SUCCESS!!');
        }).catch((error) => {
          console.log(error);
          console.log('FAILURE!!');
        });
      };
      reader.readAsDataURL(e.target.files[0]);
    },
    upload_picture() {
      console.log(this.values);
    },
  },
};
</script>

Answer 1

попробуйте изменить

reader.onload = function oldyfunt(event) {

на

reader.onload = (event) => {

это должно решить вашу проблему

this обратитесь к текущей области, в вашем случае this обратитесь к oldyfunt функция не vue instance

вы можете go глубже для arrow function здесь

Answer 2

Вы не можете использовать this ссылку внутри функции обратного вызова ax ios, вместо этого вы можете определить эту функцию в своих методах и передать ее в ax ios:

methods: {
  ...
  afterPostRequest(response) {
    console.log(response);
    this.result = response.data;
    console.log('SUCCESS!!');
  },
  handleFileChanges(e) {
    ...
    const afterPostRequest = this.afterPostRequest;
    reader.onload = function oldyfunt(event) {
      ...
      axios.post('http://0.0.0.0:9094/analyze',
        ...
      ).then(afterPostRequest).catch((error) => {
        console.log(error);
        console.log('FAILURE!!');
      });
    };
    ...
  },
  ...
},