上传VueJs之前预览图像

Question

我尝试在上传前预览图像，我想显示一个小图像，然后单击以显示全尺寸，但直到现在它都不起作用。 我正在使用vue-upload-component ，他们的 file.thumb 也不起作用。

data() {
    return {
        url:null,
    }
}
watch: {
    files: {
        handler: function(){
            this.files.forEach((file,index) =>{
                const file = e.target.file[0];
                this.url = URL.createObjectURL(file);
                console.log('Files:',this.files);
            })
        },
    }
}

//First try found on stack
<div id="preview">
    <img v-if="url" :src="url" />
</div> 

//This is from them , but is not working.
<img v-if="file.thumb" :src="file.thumb" width="40" height="auto" />
<span v-else>No Image</span>

更新现在小图像可以工作了，我只需要从该库中添加一些东西。 现在我只需要点击预览全尺寸 img 即可。

<img v-if="file.thumb" :src="file.thumb" width="40" height="auto" />

Answer 1

您正在使用 forEach 范围中的this ，尝试初始化全局ViewModel以能够访问数据参数，如下所示：

watch: {
    files: {
        handler: function(){
            let vm = this;
            this.files.forEach((file,index) =>{
                const file = e.target.file[0];
                vm.url = URL.createObjectURL(file);
                console.log('Files:',vm.files);
            })
        },
    }
}

Answer 2

你能试试这个吗？

handler: function(){
  this.files.forEach((file,index) =>{
    const file = event.target.files[0];
    if (file) {
      let reader = new FileReader();
        reader.onload = (e: any) => {
          this.url = e.target.result; //Base64 string
        }
    }
  })
}