Angular 4+文件输入访问器

Angular 4+文件输入访问器
插件名称 file-input-accessor
发布时间 2020年6月21日
插件作者 jwelker110

一个Angular(4+)指令,以Angular形式提供文件输入功能。

添加您习惯用于Angular Forms的Reactive和Template行为,但用于input [type =“ file”]。从Angular发送文件的示例代码在README中。回购在这里。如果要查看更改时发出的内容,文件将记录到控制台。

对于Angular 4和5,请使用1.xx版。对于Angular 6,请使用2.xx版。Angular 7和更高版本与Angular版本一致,因此对于Angular 7,请使用7.xx,Angular 8,请使用8.xx等。

安装:

# NPM
$ npm install file-input-accessor --save

与表格一起使用

导入FileInputAccessorModule。

 import {BrowserModule} from '@angular/platform-browser';
 import {FileInputAccessorModule} from "file-input-accessor";

 @NgModule({
     declarations: [
         AppComponent
     ],
     imports: [
         BrowserModule,
         FileInputAccessorModule
     ],
     providers: [],
     bootstrap: [AppComponent]
 })
 export class AppModule {}

您可以在文件输入中使用FormControl和NgModel。

 <!--file-upload.component.html-->

 <form>
   <!--活性形式控制-->
   <input type="file" multiple [formControl]="fileControl">
 </form>

 <form>
   <!--模板窗体控件,使用模型更改触发上传-->
   <input type="file" multiple name="templateFileUploadControl" [ngModel]="modelChangesFiles" (ngModelChange)="onFileInputChange($event)">
 </form>

 <form>
   <!--模板窗体控件,上传是手动触发的-->
   <input type="file" multiple [(ngModel)]="manualChangesFiles" name="templateFileUploadControl2">
   <button type="button" (click)="submitFiles()">Click to upload</button>
 </form>

上载档案

导入HttpClientModule(如果尚未导入)。

 @NgModule({
     declarations: [
         AppComponent,
         FileUploadComponent
     ],
     imports: [
         BrowserModule,
         RouterModule.forRoot(ROUTES),
         HttpClientModule,
         FileInputAccessorModule
     ],
     providers: [],
     bootstrap: [AppComponent]
 })
 export class AppModule {
 }

准备好上传文件时,请将其附加到FormData并使用HttpClient调用文件上传端点。

 @Component({
     selector: 'app-file-upload',
     templateUrl: './file-upload.component.html',
     styleUrls: ['./file-upload.component.css']
 })
 export class FileUploadComponent implements OnInit {

     fileControl = new FormControl();

     modelChangesFiles: ICustomFile[] = [];
     manualChangesFiles: ICustomFile[] = [];

     constructor(private _http: HttpClient) {
     }

     /**
      * 订阅响应式FormControl上的可观察的valueChanges。
      */
     ngOnInit() {
         this.fileControl.valueChanges
             .pipe(mergeMap(files => this.uploadFiles(files)))
             .subscribe(() => this.fileControl.setValue([]));
     }

     /**
      * (ngModelChange) event handler
      *
      * @param {ICustomFile[]} event
      */
     onFileInputChange(event: ICustomFile[]) {
         this.uploadFiles(event)
             .subscribe(() => (this.modelChangesFiles = []));
     }

     /**
      * 上传按钮的(点击)事件处理程序
      */
     submitFiles() {
         this.uploadFiles(this.manualChangesFiles)
             .subscribe(() => (this.manualChangesFiles = []));
     }

     /**
      * 将提供的文件追加到FormData并返回一个可观察对象,该可观察对象将传递FormData
      * 到api时订阅。
      *
      * @param {ICustomFile[]} files
      * @returns {Observable<Object>}
      */
     private uploadFiles(files: ICustomFile[]): Observable<Object> {
         if (!files || files.length === 0) {
             return EMPTY;
         }

         const data = new FormData();

         for (const file of files) {
             data.append('file', file.slice(), file.name);
         }
         return this._http.post('/api/files', data);
     }
 }

存取器输入

所有输入都是可选的。

  • [allowedExt]-用于验证每个文件的扩展名。接受以下内容:
    • 一个RegExp实例。
    • 一个字符串,将用于创建新的RegExp。
    • 一串字符串,这些字符串将加入一个捕获组并用于创建新的RegExp。
  • [allowedTypes]-接受与allowedExt相同的内容,但将用于验证文件的类型
  • [size] -用于验证每个文件的大小(字节)是否小于等于提供的值。
  • [withMeta]-如果为true,则每个文件将收到附加到ICustomFile接口的其他属性。如果您打算验证maxHeight和maxWidth,true 则必填
  • [maxHeight] -图片文件的最大可接受高度(以像素为单位)。
  • [maxWidth] -图片文件的最大可接受宽度(以像素为单位)。
  • [minHeight] -图像文件的最小可接受高度(以像素为单位)。
  • [minWidth] -图像文件的最小可接受宽度(以像素为单位)。

ICustomFile

由添加到控件的文件实现的接口。所有属性都是可选的,并且仅当withMeta输入设置为时才存在true

  • 如果文件的类型是图像:
    • imgSrc -包含数据:代表文件数据的URL。
    • imgHeight -图片的高度,以像素为单位。
    • imgWidth -图片的宽度,以像素为单位。
    • isImg– true
  • 如果文件的类型是文本:
    • textContent -文件的文本内容。
  • 每个文件都包含一个errors包含错误对象的属性。true如果文件未通过验证检查,则会设置以下错误。
    • fileSize-文件大小太大。
    • fileType-文件类型不匹配。
    • fileExt-文件扩展名不匹配。
    • imageWidth-图片不符合宽度要求。
    • imageHeight-图片不符合高度要求。
    • (> = 8.1.0)maxHeight-图片太高。
    • (> = 8.1.0)maxWidth-图片太宽。
    • (> = 8.1.0)minHeight-图片不够高。
    • (> = 8.1.0)minWidth-图像不够宽。