常用的 UI 组件库如 Ant Design 、 Element UI 等都会有的 Upload 组件,支持 change 等事件,但是事件返回的是文件对象,如果需要本地实时预览,就需要转换成 Base64 格式。
可以封装一个方法,方便以后的使用。
@/utils/getBase64.js
/** * Create by Deshun * E-mail: [email protected] * 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 » 封装一个图片文件对象转Base64的方法
原创文章,作者:6024010,如若转载,请注明出处:https://blog.ytso.com/228511.html