使用ngx-uploader模块上传到s3存储桶后无法打开图像文件

Question

我正在使用ngx上传模块上传图片到s3，使用的是Angular2+上的一个预先签名的url。

下面是我的客户端代码

​

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);
    
  }

}

  <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">

​

当我尝试下载并在上传后打开图像时，收到以下消息：“解释JPEG图像文件(不是JPEG文件:以0x2d 0x2d开头)时出错”。也许问题是，ngx-uploader通过在文件头添加附加信息来使用form-data方法上传文件。

Answer 1

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

ngx-uploader使用multipart/form-data进行上传。

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