Question

我正在使用ngx-uploader模块使用Angular2 +上的预签名网址将图片上传到s3。

这是我的代码客户端

＆＃13;

import { Component, OnInit, Inject, EventEmitter } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatSnackBar } from '@angular/material';
import { UploadOutput, UploadInput, UploadFile, humanizeBytes, UploaderOptions, UploadProgress } from 'ngx-uploader';

@Component({
  selector: 'app-upload-dialog',
  templateUrl: './upload-dialog.component.html',
  styleUrls: ['./upload-dialog.component.scss'],
})
export class UploadDialogComponent implements OnInit {
  options: UploaderOptions;
 
  uploadInput: EventEmitter<UploadInput>;
  fileName: string;
  constructor(
              public dialogRef:         MatDialogRef<UploadDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any) {
               
  }

  ngOnInit() {
  }

  uploadFichier(output: UploadOutput): void {
    if (output.type === 'addedToQueue'  && typeof output.file !== 'undefined') {
      this.currentFile = output.file;
      this.fileName = output.file.name;
    }
    // si l'upload est fini
    if (output.type === 'done') {

     // when upload done
    }
  }

  saveFile() {
  
      const respo = response.json();
      let event: UploadInput;
        console.log(this.currentFile)
        event = {
          type: 'uploadFile',
          file: this.currentFile,
          url: 'url here',
          method: 'PUT',
          headers: {'Content-Type': this.currentFile.type}
        };
      
      this.uploadInput.emit(event);
      /** */
    
  }

  cancel() {
    const cancelEvent: UploadInput = {
      type: 'cancelAll'
    };
    this.uploadInput.emit(cancelEvent);
    
  }

}

＆＃13;

  <input id="add-scolaire"  type="file" accept="image/x-png,image/gif,image/jpeg"
                mat-icon-button 
                ngFileSelect 
                [options]="options" 
                (uploadOutput)="uploadFichier($event)" 
                [uploadInput]="uploadInput">

＆＃13;

当我尝试下载并在上传后打开图像时，我收到此消息：＆＃34;解释JPEG图像文件时出错（不是JPEG文件：以0x2d 0x2d开头）＆＃34;。也许问题是，ngx-uploader使用form-data方法上传文件，在文件头上添加其他信息。

Answer 1

如何在服务器端处理文件？

ngx-uploader适用于上传的multipart / form-data。

回购Demo Server中有一个示例服务器。

使用ngx-uploader模块

1 个答案: