vue3 純前端解碼base64后預覽文件
时间: 2023-08-12 10:30:46 浏览: 60
vue前端解析word,pdf,exl,图片,视频等文件预览,支持base64格式文件转Blob流 预览源代码.zip
你可以使用 `FileReader` 对 base64 编码的字符串进行解码,并将解码后的结果显示在页面上。下面是一个示例代码:
```html
<template>
<div>
<input type="file" @change="onFileChange">
<img v-if="preview" :src="preview">
</div>
</template>
<script>
export default {
data() {
return {
preview: null
};
},
methods: {
onFileChange(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = () => {
this.preview = reader.result;
};
reader.readAsDataURL(file);
}
}
}
};
</script>
```
在上面的代码中,我们使用了一个 `input` 标签来让用户选择文件。当用户选择文件时,我们会将文件传给 `FileReader` 对象,并调用 `readAsDataURL` 方法将文件读取为 base64 编码的字符串。在读取完成后,我们将解码后的结果保存在组件的 `preview` 数据中,并在页面上展示出来。
需要注意的是,这种方式只适合处理小文件,如果要处理大文件,最好使用服务器端的解码方式。
阅读全文