下载文件后图像不会改变（VueJs和FileReader）

Question

我有一个输入类型文件。加载图片后，我为我的数据属性“imgSrc”

分配一个值

methods:{
  setImage(e){
    let file = e.target.files[0];
    let isValidImageWidthAndHeight = true;
    let $self = this;
    let reader = new FileReader();
    reader.onload = (event) => {
        let image = new Image();
        image.src = event.target.result;

        image.onload = function(){

            if(this.width < 256 || this.height < 256){
                isValidImageWidthAndHeight = false;
            }

            if(isValidImageWidthAndHeight){
                $self.imgSrc = image.src; // here i change this prop
            }else{
                Vue.swal({
                    title: 'Ошибка',
                    text: 'Минимальные размеры картинки 256 х 256',
                    type: 'error',
                });
            $('.userUploadButton').val('');
        }
      };
    };

    reader.readAsDataURL(file);
  }
}

首次加载后就像这个屏幕一样 - http://joxi.ru/KAxn6yZsMxn5Wm

但在下次上传后，图片不会更改 - http://joxi.ru/MAj38WvF4pRPar

Answer 1

$self.$refs.cropper.replace(image.src);