vue将blob图片转成baser64
时间: 2024-10-16 14:12:26 浏览: 30
vue.js图片转Base64上传图片并预览的实现方法
Vue.js 中将 Blob 类型的图片转换为 Base64 编码通常涉及到使用浏览器原生 API,如 `FileReader` 对象。以下是一个简单的示例步骤:
1. 首先,假设你有一个 `fileInput` 元素接收用户选择的文件:
```html
<input type="file" id="fileInput" @change="handleFileChange">
```
2. 在 Vue 组件中处理文件改变事件 (`handleFileChange` 函数):
```javascript
export default {
data() {
return {
selectedImage: null,
};
},
methods: {
handleFileChange(e) {
const file = e.target.files[0];
if (file) {
this.convertBlobToBase64(file);
}
},
convertBlobToBase64(file) {
const reader = new FileReader();
reader.onload = (event) => {
this.selectedImage = event.target.result;
};
reader.readAsDataURL(file);
},
},
};
```
在这个例子中,当用户选择文件后,`convertBlobToBase64` 方法会被调用,`FileReader` 的 `readAsDataURL` 方法会读取 Blob 并将其转换为 Base64 字符串。
3. 现在 `selectedImage` 数据属性存储的就是 Base64 编码的图片字符串了,你可以将其用于显示在 HTML 中,比如通过 `<img>` 标签:
```html
<img :src="selectedImage" alt="User Image">
```
阅读全文