vue2中通过按钮点击使用 VXETable.readFile获取文件并将文件转换成文件流并打印出来,并在按钮旁边显示文件名字,点击文件名字可以预览
时间: 2023-12-14 17:37:08 浏览: 148
可以使用以下代码实现:
1. 在按钮旁边显示文件名字:
```
<el-button @click="handleClick">选择文件</el-button>
<span>{{ fileName }}</span>
```
2. 点击按钮触发handleClick方法,获取文件并将文件转换成文件流并打印出来:
```
handleClick() {
this.$refs.file.click()
},
onFileChange(e) {
const files = e.target.files
if (!files.length) return
const file = files[0]
this.fileName = file.name
VXETable.readFile(file, 'binary').then(data => {
console.log(data)
})
}
```
3. 点击文件名字可以预览:
```
<span @click="previewFile">{{ fileName }}</span>
...
previewFile() {
const file = new File([data], this.fileName, { type: 'image/png' })
const url = URL.createObjectURL(file)
window.open(url)
}
```
注意:在previewFile方法中,需要将获取到的文件流通过File对象的方式进行处理,具体的type类型需要根据实际情况进行修改。
阅读全文
相关推荐

















