最近工程中一个需求就是从本地选择图片设置成用户头像,但是用<input type = "file">在onchange事件中得到的路径中包含fakepath。这个问题一直没有找到好的解决办法,无意间发现下面的方法,但是通过打印 event.target.result这个变量,发现不是路径,而是一串很长的base64编码,也没弄明白是怎么回事,刚初学,总之能完成功能,希望大神多指点。在onchange事件中关联以下函数:
function setIcon(){
var input = document.getElementById("file");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
var img = document.getElementById("icon");
img.src = event.target.result;
}
}
本地选择图片并设置成头像,避开fakepath问题
时间: 2024-10-14 00:53:35