vue中使用iview中upload上传图片显示出来

 代码是用pug模板写的

Col(span='24')
   FormItem(label="Photos & Videos")
     Upload(
       multiple
       ype="drag"
       action="//jsonplaceholder.typicode.com/posts/"
       :before-upload='handlePhotoSuccess'
      )
      div(style="padding: 20px 0")
         Icon(type="ios-cloud-upload" size="52" style="color: #3399ff")
      p Add file

组件中的定义的数据对象：

data() {
  return {
    formData: {
      imgRourse: ''
}
}
}

 

核心方法：

handlePhotoSuccess (file) {
      this.file.push(file)
      console.log(this.file)
      this.handlePreview()
      return false
    },
    handlePreview () {
      const self = this
      const reader = new FileReader()
      reader.readAsArrayBuffer(this.file[0])
      reader.onload = function (e) {
        const bf = this.result
        const blob = new Blob([bf], { type: 'text/plain' })
        const str = URL.createObjectURL(blob)
        self.formData.imgRourse = str
      }
    },