将本地image类型转成base64或者二进制文件流,vue代码如何实现
时间: 2024-03-09 20:47:31 浏览: 84
图片文件转换成二进制流并进行base64编码
在Vue中,可以使用FileReader对象来将本地图片文件转换成base64编码或二进制文件流。
以下是将本地图片转成base64编码的示例代码:
```html
<template>
<div>
<input type="file" @change="handleFileChange">
<img :src="imageData" alt="">
</div>
</template>
<script>
export default {
data() {
return {
imageData: ''
}
},
methods: {
handleFileChange(event) {
const file = event.target.files[0]
const reader = new FileReader()
reader.onload = (event) => {
this.imageData = event.target.result
}
reader.readAsDataURL(file)
}
}
}
</script>
```
在上述代码中,我们使用了`FileReader`对象将文件转换成base64编码,并将结果绑定到`<img>`标签的`src`属性上进行展示。
以下是将本地图片转成二进制文件流的示例代码:
```html
<template>
<div>
<input type="file" @change="handleFileChange">
</div>
</template>
<script>
export default {
methods: {
handleFileChange(event) {
const file = event.target.files[0]
const reader = new FileReader()
reader.onload = (event) => {
const binaryData = event.target.result
// 将二进制文件流发送到后端
}
reader.readAsArrayBuffer(file)
}
}
}
</script>
```
在上述代码中,我们同样使用了`FileReader`对象将文件转换成二进制文件流,但是没有进行展示,而是可以将得到的`binaryData`发送到后端进行处理。
阅读全文