vue ts 图片文件转base64 文本
时间: 2023-09-11 18:11:20 浏览: 143
可以使用FileReader API将图片文件转换为Base64文本,然后将其赋值给Vue组件中的data属性。以下是一个示例代码:
```typescript
<template>
<div>
<img :src="image"/>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component({})
export default class MyComponent extends Vue {
image: string = '';
onFileChange(event: any) {
const file: File = event.target.files[0];
const reader: FileReader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.image = reader.result as string;
};
}
}
</script>
```
在上面的代码中,我们定义了一个`image`属性,并将其绑定到`<img>`标签的`src`属性上。当用户选择文件后,`onFileChange`方法将会被调用,读取文件并将其转换为Base64文本,最后将其赋值给`image`属性。注意,`reader.readAsDataURL`方法将文件读取为Base64文本。