视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Angular2里获取(input file)上传文件的内容的方法
2020-11-27 22:31:06 责编:小采
文档


最近在用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;

不知道有没有更好的方法,欢迎讨论和指正。

下载本文
显示全文
专题