# @angular-ex/uploader 中文文档

规范地址：https://npmcn.com/package/%40angular-ex/uploader/

版本：16\.0\.1
npm 元数据更新时间：2023-10-23T05:18:01.736Z
中文译文更新时间：2026-11-06T04:16:31.532Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40angular-ex/uploader
原文对照：https://npmcn.com/package/%40angular-ex/uploader/?lang=original
项目主页：https://ngx-uploader.petadev.work/
源码仓库：https://github.com/angular-ex/uploader

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：143 kB，18 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/common \>= 13\.0\.0，@angular/core \>= 13\.0\.0
- 首次发布：2022-07-16T20:22:26.844Z
- 最新版本发布：2023-10-23T05:18:01.457Z
- 近 30 天下载量：6121（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 0 个）

## 中文简介

角文件上传器

## 安装

```sh
npm install @angular-ex/uploader
```

也可以使用：`pnpm add @angular-ex/uploader`、`yarn add @angular-ex/uploader`、`bun add @angular-ex/uploader`

## README

# ngx-上载器

角文件上传器

[https://ngx-uploader.petadev.work 互联网档案馆的存檔,存档日期2013-12-21](https://ngx-uploader.petadev.work/)

#### 有问题吗?

不打开一般支持问题的问题, 因为我们希望保留 GitHub 问题用于错误报告和特性请求 。 你有更好的机会 得到你的问题答案 [叠叠流](https://stackoverflow.com/) 问题应加标签 `ngx-uploader`。 。 。 .

为了节省你和我们的时间,我们将系统地解决所有要求普遍支持的问题,并将人们转向Stack Overflow.

## 安装

1.  添加 `ngx-uploader` 模块作为您项目的依赖性.

```console
npm i @angular-ex/uploader --save
```

2.  包含 `NgxUploaderModule` 输入您的主应用程序或模块,您将使用该模块.

```ts
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxUploaderModule } from 'ngx-uploader';

@NgModule({
  imports: [BrowserModule, NgxUploaderModule],
  declarations: [AppComponent]
})
export class AppModule {}
```

**或者说** 包含 `NgxUploaderModule` 进入您的共享模块。 如果您的工程已经嵌入了模块, 这可能有用 .

```ts
// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxUploaderModule } from 'ngx-uploader';
...

@NgModule({
  imports: [
    CommonModule,
    NgxUploaderModule,
    ...
  ],
  exports: [
    CommonModule,
    NgxUploaderModule,
    ...
  ],
  ...
})
export class SharedModule {
}
```

```ts
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared.module';

@NgModule({
  imports: [BrowserModule, SharedModule],
  declarations: [AppComponent]
})
export class AppModule {}
```

## 事件和上传文件的数据结构

```ts
export interface UploaderOptions {
  concurrency: number; // number of files uploaded at the same time
  allowedContentTypes?: string[]; // content types allowed (default *)
  maxUploads?: number; // max number of files the user can upload
  maxFileSize?: number; // max size of the file in bytes the user can upload
}

export interface UploadProgress {
  status: UploadStatus; // current status of upload for specific file (Queue | Uploading | Done | Canceled)
  data?: {
    percentage: number; // percentage of upload already completed
    speed: number; // current upload speed per second in bytes
    speedHuman: string; // current upload speed per second in human readable form,
    eta: number; // estimated time remaining in seconds
    etaHuman: string; // estimated time remaining in human readable format
  };
}

export interface UploadFile {
  id: string; // unique id of uploaded file instance
  fileIndex: number; // fileIndex in internal ngx-uploader array of files
  lastModifiedDate: Date; // last modify date of the file (Date object)
  name: string; // original name of the file
  size: number; // size of the file in bytes
  type: string; // mime type of the file
  form: FormData; // FormData object (you can append extra data per file, to this object)
  progress: UploadProgress;
  response?: any; // response when upload is done (parsed JSON or string)
  responseStatus?: number; // response status code when upload is done
  responseHeaders?: { [key: string]: string }; // response headers when upload is done
}

// output events emitted by ngx-uploader
export interface UploadOutput {
  type:
    | 'addedToQueue'
    | 'allAddedToQueue'
    | 'uploading'
    | 'done'
    | 'removed'
    | 'start'
    | 'cancelled'
    | 'dragOver'
    | 'dragOut'
    | 'drop';
  file?: UploadFile;
  nativeFile?: File; // native javascript File object, can be used to process uploaded files in other libraries
}

// input events that user can emit to ngx-uploader
export interface UploadInput {
  type: 'uploadAll' | 'uploadFile' | 'cancel' | 'cancelAll' | 'remove' | 'removeAll';
  url?: string; // URL to upload file to
  method?: string; // method (POST | PUT)
  id?: string; // unique id of uploaded file
  fieldName?: string; // field name (default 'file')
  fileIndex?: number; // fileIndex in internal ngx-uploader array of files
  file?: UploadFile; // uploading file
  data?: { [key: string]: string | Blob }; // custom data sent with the file
  headers?: { [key: string]: string }; // custom headers
  includeWebKitFormBoundary?: boolean; // If false, only the file is send trough xhr.send (WebKitFormBoundary is omit)
  concurrency?: number; // concurrency of how many files can be uploaded in parallel (default is 0 which means unlimited)
  withCredentials?: boolean; // apply withCredentials option
}
```

## 上传限制

使用4.2.1版本,我们引入了Content-Types的限制. 为了不打破以前发行的行为,根本不存在默认的限制.

看着 [应用家. 组件.ts](https://github.com/bleenco/ngx-uploader/blob/master/src/components/app-home/app-home.component.ts) 例如,Content-Type限制.

如果您想要为被拒绝的文件敬送信件, 请将此添加到您的 UploadOutput 方法中 .

```ts
onUploadOutput(output: UploadOutput): void {
....
} else if (output.type === 'rejected' && typeof output.file !== 'undefined') {
  // console.log(output.file.name + ' rejected');
}
...
```

## 调试授权

如果您需要用 Token 授权上传文件, 您可以将标题设置为以下 :.

```ts
startUpload(): void {
  let token = this.myToken;  // <----  get token
  const event: UploadInput = {
    type: 'uploadAll',
    url: 'http://ngx-uploader.petadev.work/upload',
    method: 'POST',
    headers: { 'Authorization': 'JWT ' + token },  // <----  set headers
    data: { foo: 'bar' },
    includeWebKitFormBoundary: true // <----  set WebKitFormBoundary
  };

  this.uploadInput.emit(event);
}
```

## 示例

**您总是可以通过克隆此寄存器、 构建工程来运行工作示例 `yarn build:prod` 运行服务器 `node ./dist-app/api/index.js`。 。 。 .**

### 组件代码

```ts
import { Component, EventEmitter } from '@angular/core';
import { UploadOutput, UploadInput, UploadFile, humanizeBytes, UploaderOptions } from 'ngx-uploader';

@Component({
  selector: 'app-home',
  templateUrl: 'app-home.component.html'
})
export class AppHomeComponent {
  options: UploaderOptions;
  formData: FormData;
  files: UploadFile[];
  uploadInput: EventEmitter<UploadInput>;
  humanizeBytes: Function;
  dragOver: boolean;

  constructor() {
    this.options = { concurrency: 1, maxUploads: 3, maxFileSize: 1000000 };
    this.files = []; // local uploading files array
    this.uploadInput = new EventEmitter<UploadInput>(); // input events, we use this to emit data to ngx-uploader
    this.humanizeBytes = humanizeBytes;
  }

  onUploadOutput(output: UploadOutput): void {
    switch (output.type) {
      case 'allAddedToQueue':
        // uncomment this if you want to auto upload files when added
        // const event: UploadInput = {
        //   type: 'uploadAll',
        //   url: '/upload',
        //   method: 'POST',
        //   data: { foo: 'bar' }
        // };
        // this.uploadInput.emit(event);
        break;
      case 'addedToQueue':
        if (typeof output.file !== 'undefined') {
          this.files.push(output.file);
        }
        break;
      case 'uploading':
        if (typeof output.file !== 'undefined') {
          // update current data in files array for uploading file
          const index = this.files.findIndex(file => typeof output.file !== 'undefined' && file.id === output.file.id);
          this.files[index] = output.file;
        }
        break;
      case 'removed':
        // remove file from array when removed
        this.files = this.files.filter((file: UploadFile) => file !== output.file);
        break;
      case 'dragOver':
        this.dragOver = true;
        break;
      case 'dragOut':
      case 'drop':
        this.dragOver = false;
        break;
      case 'done':
        // The file is downloaded
        break;
    }
  }

  startUpload(): void {
    const event: UploadInput = {
      type: 'uploadAll',
      url: 'http://ngx-uploader.petadev.work/upload',
      method: 'POST',
      data: { foo: 'bar' }
    };

    this.uploadInput.emit(event);
  }

  cancelUpload(id: string): void {
    this.uploadInput.emit({ type: 'cancel', id: id });
  }

  removeFile(id: string): void {
    this.uploadInput.emit({ type: 'remove', id: id });
  }

  removeAllFiles(): void {
    this.uploadInput.emit({ type: 'removeAll' });
  }
}
```

### 模板代码

整个模板代码请检查 [这里](https://github.com/bleenco/ngx-uploader/blob/master/src/components/app-home/app-home.component.html)。 。 。 .

```html
<div
  class="drop-container"
  ngFileDrop
  [options]="options"
  (uploadOutput)="onUploadOutput($event)"
  [uploadInput]="uploadInput"
  [ngClass]="{ 'is-drop-over': dragOver }"
>
  <h1>Drag &amp; Drop</h1>
</div>

<label class="upload-button">
  <input
    type="file"
    ngFileSelect
    [options]="options"
    (uploadOutput)="onUploadOutput($event)"
    [uploadInput]="uploadInput"
    multiple
  />
  or choose file(s)
</label>

<button type="button" class="start-upload-btn" (click)="startUpload()">
  Start Upload
</button>
```

### 属性

麻省理工学院

## 常见问题

### @angular-ex/uploader 是什么？

角文件上传器

### 如何安装 @angular-ex/uploader？

在项目目录运行 npm install @angular-ex/uploader，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（\>= 13\.0\.0）、@angular/core（\>= 13\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @angular-ex/uploader 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @angular-ex/uploader 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @angular-ex/uploader 可以商用吗？

@angular-ex/uploader 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @angular-ex/uploader 的下载量有多少？

根据 npm 官方下载统计，@angular-ex/uploader 在 2026/10/06 – 2026/11/04 这 30 天内被下载 6,121 次，日均约 204 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @angular-ex/uploader 还在维护吗？

最新版本 16\.0\.1 发布于 2023/10/23（3 年前）；至今共发布 8 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/07/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。