Angular2里获取（input file）上传文件的内容的方法
更新时间：2017年09月05日 16:44:03 投稿：zx
这篇文章主要介绍了Angular2里获取（input file）上传文件的内容的方法，非常具有实用价值，需要的朋友可以参考下
最近在用Angular2，需要有一个上传文件的功能，但是又不想用库，所以直接用原生的input file 标签。
<input type="file" id="newUpload" >
然后想获取上传的内容，于是先想了个愚蠢的方法，先通过id获取到这个input标签，然后再获取其中上传的内容
const uploadsFile = document.getElementById(name).files[0];
结果就报错了。然后看提示说HTMLElement没有files方法。于是在es6里找了下有files属性的类型，是HTMLInputElement类型。于是就强制它转换成这个类型。
const uploadsFile=<HTMLInputElement>document.getElementById(name).files[0];
结果还是不行，最后改成了先转换类型再调用属性就可以了。
const uploadsFile = <HTMLInputElement>document.getElementById(name); const file = uploadsFile.files[0];
后面发现这种方式好像有点愚蠢，于是换了一个方法，用angular2里的$event来获取输入内容，里面也包括选择上传的文件。
<input type="file" id="newUpload" (change)="getUpload(newUpload, $event)" >
选择的文件在event.target.files里
private getUpload(obj, e) {
if (e.target.files[0]) {
const file = e.target.files[0];
obj.file = file;
}
}
接着就可以把它放到formdata里了
const formData = new FormData();
formData.append('file', this.upload.file);
最后清空选择上传的内容可以用
let upload = <HTMLInputElement>document.querySelector(selectorName); upload.value = null;
不知道有没有更好的方法，欢迎讨论和指正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了详解angular element()方法使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要介绍了Angular.js去除页面中显示的空行方法，文中给出了详细的示例代码供大家参考学习，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
这篇文章主要介绍了Angular ng-class的知识，并整理了相关资料，有兴趣的小伙伴可以参考下2016-09-09
这篇文章主要介绍了AngularJS指令用法,较为详细的分析了AngularJS指令的功能、用法及自定义指令的相关实现技巧,需要的朋友可以参考下2016-11-11
在AngularJS中获取数据源的方式有很多种，本文给大家整理几种获取数据源的方式，对angularjs获取数据源的方式相关知识感兴趣的朋友一起学习吧2016-02-02
本篇文章主要介绍了Angular2学习笔记之数据绑定的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
Angular统一注入器unified injector简化依赖关系管理
这篇文章主要为大家介绍了Angular统一注入器unified injector简化依赖关系管理的使用方法实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
本篇文章主要介绍了Angular整合zTree的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了详解Angular5路由传值方式及其相关问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
anime.js是一个灵活的轻型JavaScript动画库。这篇文章主要介绍了anime.js 实现带有描边动画效果的复选框 ,需要的朋友可以参考下2017-12-12
最新评论