Хэш-файлы VueJS с CryptoJS

Question

Я обращаюсь к вам, потому что я ужасно застрял в проекте Vue ...

У меня возникла небольшая проблема при попытке перенести проект jQuery в Vue.CryptoJS работает с чармом, и я могу создавать хэши из строк.

Однако я все еще пытаюсь прочитать реальный файл, поскольку вложенные функции выдают ошибки.В частности, получение ошибок в функции callbackRead.

App.vue?234e:280 Uncaught TypeError: this.callbackRead is not a function
at FileReader.reader.onload (App.vue?234e:280)

Не могли бы вы дать мне несколько советов о том, как успешно перевести скрипт в VUE JS?(https://medium.com/@0xVaccaro/hashing-big-file-with-filereader-js-e0a5c898fc98)

Заранее большое спасибо !!!

Вот что я получил до сих пор: https://codesandbox.io/s/vuejs-file-crypter-kjirp

С уважением, Mac

Answer 1

Ошибка из этого раздела:

reader.onload = function(evt) {
    this.callbackRead(this, file, evt, callbackProgress, callbackFinal);
};

Проблема в том, что this относится к неправильному объекту. Ваш обработчик onload отличается от окружающего кода, и всякий раз, когда вы вводите новую функцию, значение this изменяется.

Существует несколько возможных решений.

Псевдоним this:

const that = this;

reader.onload = function(evt) {
    that.callbackRead(that, file, evt, callbackProgress, callbackFinal);
};

Переплет this:

reader.onload = function(evt) {
    this.callbackRead(this, file, evt, callbackProgress, callbackFinal);
}.bind(this);

Использование функции стрелки, которая не изменит значение this:

reader.onload = evt => {
    this.callbackRead(this, file, evt, callbackProgress, callbackFinal);
};