前端工作小结72-实现预览效果

1子组件

成功

      ChangeRest(event, file){
       /*   console.log(event)
          console.log(file)*/
         /* console.log(URL.createObjectURL(file.raw))*/
          this.imageUrl = URL.createObjectURL(file.raw);
         /* this.imageUrl=event.tmp_url
          console.log(this.imageUrl)*/
          console.log(1)
          this.eventSave=event
          console.log(this.eventSave)
          this.$emit("ChangeLest",this.eventSave)
        },

2父组件

     changeRest1(val){
          console.log(2)
          console.log(val)
          this.preview=val.tmp_url
          console.log(this.preview)
          this.form.thumbnail=val.relativepath+val.name
     
        }

3预览效果

通过两个不同的值实现预览 下面做个预览 库里面加个字段即可

posted @ 2022-09-02 21:48  前端导师歌谣  阅读(41)  评论(0)    收藏  举报