1.想在应用添加上传本地文件怎么办?很简单
<div class="container">
<img id="Img" class="Img" *ngIf="isShow" [src]="imgData"/>
<input type="file" id="input" (change)="getPicture($event)" accept="image/*"/>
</div>
HTML5中关键是input标签的type="file"起作用,有了该定义就可以进入选择本地文件页面,当选择文件就会触发change()方法,标签的accept属性是定义上传文件的类型,若不定义则可以选择任意类型,以上定义就是可以上传任意类型图片
以下是一些简单的样式
.container{
position: relative;
left:50%;
width: 300px;
height:525px;
transform: translate(-50%);
border: 1px solid wheat;
display: flex;
flex-direction:column;
box-sizing: content-box;
}
.Img{
width: 100%;
height: 500px;
border:1px solid red;
}
js部分,代码有详细注释
import {DomSanitizer} from '@angular/platform-browser'
constructor(private sanitizer:DomSanitizer) { }
imgData:any;//用于绑定img标签得src属性,显示图片
isShow:boolean=false;//绑定*ngif,判断是否显示图片
getPicture(event){//获取单张图片
this.isShow=true;
this.imgData=this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(event.target.files[0]));//关键部分,这里获得的是图片临时url,不可用于上传至服务端(带有localhost,即本机),只供在前端预览图片
console.log("图片详细信息:",event.target.files[0]);//可省
console.log("url",this.imgData);//可省
}
当选择图片后,就可以通过event.target.files[0]在控制台看到选中图片的具体信息
需要注意的是需要引入import {DomSanitizer} from ‘@angular/platform-browser’,因为通过createObjectURL()生成的url(该地址可以直接在浏览器获得图片),在angular中被视为不安全不信赖的地址,因此需要用到bypassSecurityTrustUrl()使得在angular可正常运行。
URL.createObjectURL()讲解
该方法会创建一个DOMString,其中包含一个表示参数中给出的对象URL,这个URL的生命周期和创建它的窗口中document绑定,所谓生命周期即该URL的有效时间根据该document而定,document停止运行后,该URL变成无效URL,称为临时URL.
语法:
objectURL = URL.createObjectURL(object);//object用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。
返回值:一个DOMString包含了一个对象URL,该URL可用于指定源 object的内容。
注意:
在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器在 document 卸载的时候,会自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们
图片预览效果:
2.根据上面得到的url只是临时url,如果想把图片上传到服务端,则需要将图片转化为base64格式(当然base64格式也可以用来预览图片)
js代码如下:
getPicture(event){//获取单张图片
this.isShow=true;
const file=new FileReader();
file.onload=(e)=>{
this.imgData=e.target.result; //e.target.result就是改图片的base64格式
console.log("base64:",this.imgData);
}
file.readAsDataURL(event.target.files[0]); //后面讲解该方法
}
运行效果:
readAsDataURL()方法讲解
readAsDataURL()会读取指定的Blob或File为参数的对象。读取完成后,readyState会变成Done(已完成)状态,并触发loadend事件,同时result属性将包含一个data:URL格式的字符串(base64编码),也就是图片数据–>e.target.result(e.target.result=file.result)
3.有没有发现上传文件的样式特别丑?
接下来修改改样式,把它弄成微信的样式
原理:将input隐藏,用button来触发弹出input
HTML5:注意input的style属性
<div class="container">
<img id="Img" class="Img" *ngIf="isShow" [src]="imgData"/>
<input type="file" id="input" (change)="getPicture($event)" accept="image/*" style="display:none"/>
<button id="pushButton" class="button" (click)="pushButton()">+</button>
</div>
css:只给出button的样式,其它跟上面的一样
.button{
font-size: 30px;
width:40px;
height:40px;
border:2px solid black;
border-radius: 50%; //将边框弄圆
outline: none; //设置无边界,否则点击会显示原来的边框,很丑
background-color: white;
}
js:
pushButton(){
var selectFile=document.getElementById("input");
selectFile.click();//触发input的change()方法
}
getPicture(event){
console.log(event);
this.isShow=true;
var file=event.target.files[0];
var reader=new FileReader();
reader.onload=(e)=>{
this.imgData=reader.result;
}
reader.readAsDataURL(file);
}
效果: