Vue.js считывание большого двоичного объекта как объекта/строки в переменную приложения

#javascript #vue.js

Вопрос:

У меня есть приложение vue с

 data: function() {
    return {
        modules: [],
        ...
 

И способ:

 methods: {
    submitted: function(){
        ...
        axios({method: 'get',
              url: 'http://'   document.location.host   '/api/execute?commands='   encodeURI(JSON.stringify(commands)),
              responseType: "blob"}).then(response => {
            
            if (response.headers['content-type'] === 'image/jpeg'){
                this.modules[current]['results']['image']['visible'] = true
                this.modules[current]['results']['text']['visible'] = false
                
                const url = window.URL.createObjectURL(response.data)
                this.modules[current]['results']['image']['value'] = url
            }
            else{
                this.modules[current]['results']['image']['visible'] = false
                this.modules[current]['results']['text']['visible'] = true
                var reader = new FileReader();
                reader.onload = function(e) {
                   // reader.result contains the contents of blob as a typed array
                   console.log(e)
                   this.modules[current]['results']['text']['value'] = reader.result
                }
                reader.readAsArrayBuffer(response.data);
                
            }
            ...
 

Это должно запросить некоторые данные с сервера и отобразить их в виде текста или изображения в зависимости от ответа сервера.

 *v-for module in modules earlier*
<div class="resultText" :visibility=module.results.text.visible>
    {{ module.results.text.value }}
</div>
<div class="resultImage" :visibility=module.results.image.visible>
    <img :src=module.results.image.value>
</div>
 

Но метод выдает ошибку js при возврате текста: ошибка типа: this.modules не определен
Ошибка в этой строке:

 this.modules[current]['results']['text']['value'] = reader.result
 

С изображениями это работает нормально.
С self.modules это дает то же самое: ошибка типа: self.modules не определен

Ответ №1:

Решил проблему с:

 response.data.text().then(text => {
    this.modules[current]['results']['text']['value'] = text
});