发表于： 2021-04-19 19:57:00
1 1848
今天完成的事情：完成了图片的数据显示和预览
明天计划的事情：将图片上传到服务器
收获：如何获得上传图片的数据和预览图片
<input type="file" id="choose" accept=".png, .jpg, .jpeg">
使用input type=“file”来选择图片
并通过accept来限制可上传文件的后缀
给input添加事件
(change)="getimg($event)"
$event模拟this的作用，在这里指向上传的图片
getimg(a: any) {
var file = a.target.files[0] //创建新文件对象file
this.name = file.name //可以从file中得到图片
this.size = Math.round(file.size / 1024) //的名字和大小等信息
var x = document.getElementById("show") as HTMLImageElement
var reader = new FileReader() //创建文件读取对象
reader.readAsDataURL(file) //使用该对象读取file文件
reader.onload = function (e: any) { //读取成功后返回的一个参数e
x.src = e.target.result //选择所要显示图片的img，赋值给img的src
}
}
返回列表
评论