vue 에 서 는 iview 에서 upload 로 사진 을 업로드 하여 표시 합 니 다.

1130 단어 Vuevue
코드 는 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
      }
    },

좋은 웹페이지 즐겨찾기