vue中 iview的upload上传图片 获取本地图片绝对路径 在前端实现图片预览

WinerChopin 2019-11-17

在用iview的upload上传图片的时候,想要实现图片的预览。 但是在iview给的例子中,是每上传一个图片触发一次上传事件,调一次接口,后台将图片存入数据库,再回传给前端,这样实现图片在前端的显示。
这个方法对于上传多张图片,无疑很不现实。

于是就有了下面的方法。
想要实现上传多张图片,上传的图依次显示出来,点击提交,实现同时上传,只调一次接口,后台一次性将多张图片存入数据库。

在图片上传前 'handleBeforeUpload' 事件中加入以下代码,获取的_base64即为本地图片的绝对路径,将其存起来,在赋值到img的src路径,即可实现图片在上传前的显示,实现图片的预览

const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
        const _base64 = reader.result
        console.log(_base64)
    }

整体代码copy

//图片上传前事件
    handleBeforeUpload (file) {
      this.file = file //需要传给后台的file文件
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        const _base64 = reader.result
        this.imgUrl = _base64 //将_base64赋值给图片的src,实现图片预览
      }
      return false//阻止图片继续上传,使得form表单提交时统一上传
    }

相关推荐