angular前端获取电脑本地文件file相应操作

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); 
    }

效果：
在这里插入图片描述