状态未在 onload 函数内分配

Question

我正在尝试将图像的数据 url 分配给一个状态，但它没有分配给该状态。首先我将 blob url 转换为数据 url，然后将其分配给 vuejs 中的状态，但是，该状态没有数据 url。

imgSrc 确实在 onload 函数中显示了控制台日志的数据 url。但是如果我在任何其他函数中使用状态 imgSrc 则它会显示 blob url 而不是数据 url。

//suppose I have a blob url and it's passed as a prop

value = blob:http://localhost:8080/ca6d6419-f933-439b-8a16-62a80c81ab1a

upload() {
      this.imgSrc = this.value;
      let img = new Image();
      img.src = this.value;
      img.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.getContext('2d').drawImage(img, 0, 0);
        const dataURI = canvas.toDataURL();
        this.imgSrc = dataURI;
        console.log('imgSrc inside', this.imgSrc); //shows data url
      };
      console.log('imgSrc outside', this.imgSrc); //shows blob url
    },

Answer 1

onload 回调中的this 不引用 vue 实例，要使其引用，您应该将 this 分配给全局变量，然后在回调中使用该变量：

upload() {
      this.imgSrc = this.value;
      let img = new Image();
      img.src = this.value;
     let vm=this;
      img.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.getContext('2d').drawImage(img, 0, 0);
        const dataURI = canvas.toDataURL();
        vm.imgSrc = dataURI;
        console.log('imgSrc inside', vm.imgSrc);
      };
     //any code here will be ran before the callback 
    },