用 Angular 上传文件?

2024-01-01

我知道这是一个非常普遍的问题,但我无法在 Angular 2 中上传文件。 我努力了

1) http://valor-software.com/ng2-file-upload/ http://valor-software.com/ng2-file-upload/ and

2) http://ng2-uploader.com/home http://ng2-uploader.com/home

...但是失败了。有人用 Angular 上传过文件吗?你用了什么方法?怎么办呢?如果提供任何示例代码或演示链接,我们将不胜感激。


Angular 2 为上传文件提供了良好的支持。不需要第三方库。

<input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx">
fileChange(event) {
    let fileList: FileList = event.target.files;

    if (fileList.length < 1) {
      return;
    }
    
    let file: File = fileList[0];
    let formData:FormData = new FormData();
    formData.append('uploadFile', file, file.name)
    
    let headers = new Headers();
    /** In Angular 5, including the header Content-Type can invalidate your request */
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');

    let options = new RequestOptions({ headers: headers });

    this.http.post(`${this.apiEndPoint}`, formData, options)
        .map(res => res.json())
        .catch(error => Observable.throw(error))
        .subscribe(
            data => console.log('success'),
            error => console.log(error)
        );
}

使用 @angular/core": "~2.0.0" 和 @angular/http: "~2.0.0"

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

用 Angular 上传文件? 的相关文章

随机推荐

  • 将轮询 Web 服务转换为 RX

    Given public partial class Weather private readonly DispatcherTimer timer new DispatcherTimer private readonly IWeatherD
  • Django 模板内联 jQuery 不起作用

    尝试在我的模板中使用内联 jQuery 以便稍后可以在 AJAX 调用中使用 django url 标签 但我无法让 javascript 工作 在我的子页面中 我扩展了索引页面 其中包含我所有的 javascript 和 jQuery 库
  • 限制减法结果的下限

    我想从标量中减去向量中的值 但是 如果结果小于零 我想将结果设置为零 我尝试过使用max 但它没有给我预期的结果 s 1 750 0 975 0 1125 0 1237 5 1312 5 1400 0 max 1050 s 0 1 300
  • 如何使用apache Camel从mysql表中读取数据并写入到另一个表中

    伙计们 我正在使用 Apache Camel 从 mysql 表读取数据 我在控制台上成功打印它 但根据我的要求 我需要从一个mysql数据库读取数据 然后使用某种条件过滤它 然后将过滤后的数据插入到另一个mysql数据库表中 我在下面发布
  • 如何在Rails中检索图像的EXIF信息

    我正在使用 Rails 回形针在我的页面中显示图像 我想知道如何检索图像的 EXIF 信息 如尺寸 相机型号 高度 宽度等 有人可以帮我吗 谢谢 你给了吗exifr https github com remvee exifr 宝石尝试一下吗
  • 如何在 Java 中覆盖 HTTP 连接中的 DNS

    Curl 具有手动指定将主机解析到哪个 IP 的功能 例如 curl https google com resolve google com 443 173 194 72 113 这在使用 HTTPS 时特别有用 如果只是一个 HTTP 请
  • 在 Scala 工作表中使用自定义枚举时收到错误:java.lang.ExceptionInInitializerError

    UPDATE 2014年9月17日 事实证明 即使先前更新 从 2013 年 2 月 19 日起 中的解决方案无法工作如果一个地方println Value Player2 作为第一个命令 即序数仍然分配不正确 从那以后我创建了一个可验证的
  • Google Play 分阶段推出并修改了屏幕截图

    使用 Google Play 分阶段推出选项 我可以向一小部分用户发布 Android 应用的新版本 根据它的成功程度 我会在给定时间内增加百分比 我假设 因为我找不到记录 如果我将应用程序推广到 10 那么该应用程序的新用户和现有用户都会
  • 使用 nil 合并运算符缩短编译时间

    读完后article https habrahabr ru post 283106 关于快速编译时间 我感兴趣的是为什么使用超过 2 个序列合并运算符会显着增加编译时间 例子 编译时间 3 65 秒 func fn gt Int let a
  • 如何创建自定义 Symfony2 Twig 表单模板块

    我正在开发一个项目 我需要一些自定义表单模板块 不是现有块的修改版本 而是新块 我已经能够创建新的块并让 Symfony Twig 识别和使用它们 但有限制 表单模板块似乎有严格的命名约定 看来模板名称必须恰好包含一个下划线 下划线之前的单
  • Python tkinter 列表框绑定 仅在第二次单击时有效

    如果有其他讨论已经解决了这个问题 我预先表示歉意 但我找不到任何东西 我是 Python 新手 除了 90 年代的一点点 Pascal 之外 我也是编程新手 我正在构建一个带有 tk 输入框的 GUI 供用户输入值 然后将其存储在 sqli
  • Android RecyclerView - 多个Edittext同时更改

    我有一个RecyclerView有很多张牌可以容纳 4EditText 当我在其中输入值时EditText一张卡的值会在随机卡中填充相同的值 令人惊讶的是它不会跳EditText例如 如果我输入值edittext1 of card1它会将相
  • 如何在 Android RecyclerView 上对字符串进行排序?

    我有一个充满 CardView 的 recyclerView 它有 2 个参数 它们都是字符串 其中之一是标题 我想要一个按钮来根据标题按字母顺序对它们进行排序 因为它没有太多元素 所以我决定使用插入排序 即 o n 2 这是我的实现 pu
  • Spring Boot中处理嵌入式Tomcat异常

    我们遇到嵌入式 Tomcat 抛出的问题IllegalArgumentException来自LegacyCookieProcessor 它抛出 500 HTTP 响应代码 我们需要处理异常并对其执行某些操作 具体来说 将其作为 400 发送
  • Android中TextView的TextAppearance属性

    我正在开发我正在使用的 Android 应用程序TextView在屏幕上显示文本 我将此属性用于TextView设置文本的大小android textAppearance android attr textAppearanceMedium
  • 使用 Cognito 令牌访问 S3 时收到“AccessDenied”

    我正在尝试在存储桶上使用 listObjects 操作 这是通过 WebService 访问的 我不想授予用户控制台访问权限 角色政策 Version 2012 10 17 Statement Effect Allow Action mob
  • U2Net模型在android中的使用

    我按照以下步骤将原始 u2net 模型权重文件 u2net pth 转换为tensorflow lite说明 https qiita com PINTO items ed06e03eb5c007c2e102 就转换成功了 但是我在tenso
  • 了解分段错误的堆栈跟踪

    我正在做一个snprintf并出现段错误 当我像这样在 gdb 上加载核心文件时 gdb my executable core 并做了bt为了获得回溯 我得到了以下内容 Program terminated with signal 11 S
  • 构建 OpenAPI 响应,包括 oneOf 或 allOf

    我正在尝试使用 OpenAPI 3 从各种架构组件构建响应 响应基本上分为三个部分 其他端点使用的共享组件 即成功 失败标志 components schemas core response schema inside allOf 属性al
  • 用 Angular 上传文件?

    我知道这是一个非常普遍的问题 但我无法在 Angular 2 中上传文件 我努力了 1 http valor software com ng2 file upload http valor software com ng2 file upl