一、选择文件上传
上传文件的关键在input标签，以及获取文件并发送
<!--ng版本--><input hidden type="file" multiple="multiple" (change)="fileChange($event)" ><!--原生版本 用js监听change事件就好了--><input hidden type="file" multiple="multiple">
使用hidden属性将input标签隐藏，这样便于我们使用其他颜色，或者按钮来替代原生的样式。
而后使用label标签将按钮或者其他标签和input包裹起来。这样点击label即可直接触发input，类比，点击文字选择单选按钮。
<label><span>选择文件</span><input hidden type="file" multiple="multiple" (change)="fileChange($event)"></label>
只需替换或改变span标签，就可以做到最大程度自定义样式。
接下来js部分，只需监听input的change事件即可
//获取的是一个File列表，由于目前只上传一个文件，所以取第一个就可以了//ng-版本fileChange(e){let file=e.target["files"][0];}//原生jsdocument.getElementById('input').addEventListener('change',function(){let file=this['files'][0];})
file对象中有很多属性，我们可以取出来用，比如文件名，文件大小等等。能拿到这些东西，我们就能做预览。
二、预览
1、文件预览
将pdf拖入谷歌浏览器，原生使用的就是embed标签。非常好用的一个标签。
<!--ng版本--><embed *ngIf="pdfURL" id="pdf" [src]="pdfURL" type="application/pdf" width="300px" height="300px"/><!--原生版本(只能通过手动去设置display：none去显示隐藏这个标签了，意思都差不多)--><embed id="pdf" type="application/pdf" width="300px" height="300px"/>
注意type，不同的文件解析，使用不同的type。可以js做个判断去控制。这里不写了哈。
js部分主要是构造本地路径，替代src；
//原生只需要这样得到url，然后替换let url = window.URL.createObjectURL(file);//传入之前获取的file对象 //ng 则需要替换成安全路径，需要注入DomSanitizer将上述得到的url进行转换let pdfURL=this.sanitizer.bypassSecurityTrustResourceUrl(url); //因为绑定了src所以ng到这里就可以了//原生还需要设置document.getElementById('xxx').setAttribute('src',url);
createObjectURL() 方法需要做多兼容，可以百度一下查查，我这里直接使用这个方法可以直接创建url了。
最终change事件如下
//原生只需要这样得到url，然后替换let url = window.URL.createObjectURL(file);//ngfileChange(e){let file=e.target["files"][0];this.pdfURL=this.sanitizer.bypassSecurityTrustResourceUrl(url); }//原生jsdocument.getElementById('input').addEventListener('change',function(){let file=this['files'][0];document.getElementById('xxx').setAttribute('src',url);})
其实这样获取路径预览文件也可以预览图片
2、base64String预览图片
var reader=new FileReader();let imgUrl;reader.readAsDataURL(file);reader.onload=function () { imgUrl=reader.result}
将上述代码加入到change事件中即可获取图片的base64的路径，而后在onload里面替换src，一定要在onload里替换，不然拿不到图片路径。通用后面发送的ajax请求也就必须在这个里面进行或者，重新获取img的src去调接口，保证拿到base64String即可。
三、文件发送
最终发送文件方式采用ajax的formdata。这个可能根据不同项目进行调整，比如之前传图片使用 base64String。这里两种方式都会写出；
this.formData=new FormData();this.formData.append("file",file);
我们利用formData对象，直接将文件append进去。记得每次用完要清一下，以免下一次使用还是一样的文件。所以建议放在change时间里面，每次换文件都会new一个新的对象。
最后在ajax中发送：
this.ajax.excuteSend({path: `xxx`,method: "post",options:{headers: {contentType: "multipart/form-data"}},data:this.formData}).subscribe((rs: HttpResponse<any>) => {})}
这个是自己封装过一遍的ajax建议只做参考，主要注意 header里的设置，上传文件的头。
base64位就没什么好说的了，和字符串一样正常上传就好，让后端去解析就行了。
