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

Question

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

这是我的客户端代码

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 .