vue中使用iview中upload上传图片显示出来
代码是用pug模板写的Col(span='24')FormItem(label="Photos & Videos")Upload(multipleype="drag"action="//jsonplaceholder.typicode.com/posts/":before-upload='handlePhotoSuccess')div(style="padding: 20px 0".
·
代码是用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
}
},
更多推荐
已为社区贡献5条内容
所有评论(0)