iView的Upload组件实现上传图片预览

在iView官方给出的upload组件上传图片案例中,图片的预览在每上传一个图片调一次接口,后台将图片存入数据库后,再回传给前端来实现图片预览。而大多情况我们只是想先预览图片内容是否正确上传图片。

       针对这种情况,

      1.我们可以先获取图片的base64即图片的在我们本机的绝对路径;        

      

handleUpload (file) {
                 this.file = file
                 const reader = new FileReader()
                 reader.readAsDataURL(file)
                 reader.onload = () => {
                        const _base64 = reader.result
                          this.logoPreview = _base64
                  }
      return false
},

    

  2.将图片的绝对路径放入img标签进行展示即可


版权声明:本文为canyang666666原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。