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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Angular2获取上传文件内容  # Angularjs上传文件组件flowjs功能  # 基于AngularJS的拖拽文件上传的实例代码  # SpringMvc+Angularjs 实现多文件批量上传  # Angular2-primeNG文件上传模块FileUpload使用详解  # AngularJS 文件上传控件 ng-file-upload详解  # AngularJS+Bootstrap实现多文件上传与管理  # 学习使用AngularJS文件上传控件  # AngularJS向后端ASP.NET API控制器上传文件  # Angular Js文件上传之form-data  # angularjs客户端实现压缩图片文件并上传实例  # 上传  # 就可以  # 是在  # 可以用  # 把它  # 错了  # 想了  # 换了  # 然后再  # 找了  # 又不  # 转换成  # 想用  # 里了  # 大家多多  # 清空  # 有一个  # 上传文件  # 改成了  # lt 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel distinct去重查询_Laravel Eloquent去重方法  如何在云主机快速搭建网站站点？  如何生成腾讯云建站专用兑换码？  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  如何在阿里云购买域名并搭建网站？  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  最好的网站制作公司,网购哪个网站口碑最好，推荐几个？谢谢？  Firefox Developer Edition开发者版本入口  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  如何为不同团队 ID 动态生成多个独立按钮  Android中Textview和图片同行显示(文字超出用省略号，图片自动靠右边)  如何快速搭建FTP站点实现文件共享？  如何在 Python 中将列表项按字母顺序编号（a.、b.、c. …）  MySQL查询结果复制到新表的方法(更新、插入)  怎样使用JSON进行数据交换_它有什么限制  进行网站优化必须要坚持的四大原则  如何在宝塔面板创建新站点？  夸克浏览器网页跳转延迟怎么办 夸克浏览器跳转优化  如何选择可靠的免备案建站服务器？  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  如何将凡科建站内容保存为本地文件？  如何彻底卸载建站之星软件？  linux top下的 minerd 木马清除方法  Android使用GridView实现日历的简单功能  制作企业网站建设方案,怎样建设一个公司网站？  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  如何用免费手机建站系统零基础打造专业网站？  WEB开发之注册页面验证码倒计时代码的实现  ,在苏州找工作，上哪个网站比较好？  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  Laravel Seeder怎么填充数据_Laravel数据库填充器的使用方法与技巧  Laravel Facade的原理是什么_深入理解Laravel门面及其工作机制  怎么用AI帮你为初创公司进行市场定位分析？  Laravel如何保护应用免受CSRF攻击？（原理和示例）  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  JS经典正则表达式笔试题汇总  使用豆包 AI 辅助进行简单网页 HTML 结构设计  公司门户网站制作流程,华为官网怎么做？  Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程  EditPlus中的正则表达式 实战(2)  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf？  Laravel怎么导出Excel文件_Laravel Excel插件使用教程  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  Laravel如何升级到最新版本？（升级指南和步骤）  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  如何在阿里云通过域名搭建网站？  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案