常用的 UI 组件库如 Ant Design 、 Element UI 等都会有的 Upload 组件，支持 change 等事件，但是事件返回的是文件对象，如果需要本地实时预览，就需要转换成 Base64 格式。
可以封装一个方法，方便以后的使用。
@/utils/getBase64.js
/**
* Create by Deshun
* E-mail: contact@w3h5.com
* Date: 2021-05-27 下午 8:07:12
*/
// 文件对象转base64
export default function getBase64 (obj) {
const image = obj; //获取文件域中选中的图片
let reader = new FileReader(); //实例化文件读取对象
reader.readAsDataURL(image); //将文件读取为 DataURL,也就是base64编码
reader.onload = function (ev) { //文件读取成功完成时触发
let dataURL = ev.target.result; //获得文件读取成功后的DataURL,也就是base64编码
return dataURL
}
}在需要的页面引入：
page.vue
<script>
// 引用方法
import getBase64 from '@/utils/getBase64'
export default {
data() {
return {
...
}
},
methods: {
// 图片文件对象转Base64
getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
})
},
// 上传&选择图片
handleChange(file) {
// 读取&处理图片
this.getBase64(file).then(res => {
let img = new Image()
img.src = res
img.onload = function () {
...
}
})
}
}
}
</script>未经允许不得转载：w3h5-Web前端开发资源网 » 封装一个图片文件对象转Base64的方法
