使用CryptoJS的VueJS哈希文件

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);
};