常用的 UI 组件库如 Ant Design 、 Element UI 等都会有的 Upload 组件，支持 change 等事件，但是事件返回的是文件对象，如果需要本地实时预览，就需要转换成 Base64 格式。
可以封装一个方法，方便以后的使用。
@/utils/getBase64.js
/**
* Create by Deshun
* E-mail: [email protected]/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-yjshash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-yjsemail')){for(e='',r='0x' a.substr(0,2)|0,n=2;a.length-n;n =2)e ='%' ('0' ('0x' a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */
* 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的方法
