Angular 7 загрузить изображение на s3 в формате base64 - PullRequest
Новая
       11

Angular 7 загрузить изображение на s3 в формате base64

0 голосов
/ 18 апреля 2020

В приложении Ioni c 4 angular 7 пытается загрузить изображение из плагина камеры Cordova.

Выходные данные плагина Camera - это данные изображения base64. 

this.camera.getPicture(options).then((imageData) => {
  // imageData is either a base64 encoded string or a file URI
  // If it's base64 (DATA_URL):
  const base64Image = 'data:image/jpeg;base64,' + imageData;

  this.uploadImage(url, base64Image )
}, (err) => {
  // Handle error
});

Я генерирую предварительно подписанный URL-адрес AWS S3 для загрузки изображения на стороне сервера.

например, http://127.0.0.1/gdcom/63a5d901-7966-11ea-bf01-a7a6315cc36d/d418baf3-8129-11ea-a67d-3646e8bf199f.jpeg?AWSAccessKeyId=remote-identity&Expires=1587183624&Signature=mC6CRT6sPVKeCKM0aVj%2ByKzDy%2F8%3D

Приведенный ниже код не выдает никакой ошибки, но загруженное изображение является просто черным экраном, а не фактическим изображением.

Как правильно HTTP PUT для передачи изображения на S3, доступное изображение в кодировке base64? 

uploadImage(url: string, imageData: any): Promise<any> {
    const headers = new HttpHeaders({'Content-Type': 'image/jpeg;'});

    return this.http.put(url, imageData, {headers: headers})
        .pipe(
            tap(data => console.log(JSON.stringify(data))),
            catchError(this.handleError('uploadImage'))
        ).toPromise();
}

1 Ответ

2 голосов
/ 19 апреля 2020

Загрузка с использованием Postman работала путем выбора двоичных данных.
Поэтому я продолжил и повторил то же самое с ioni c 4 и httpclient, ссылаясь на

Angular 5 HttpClient post raw raw data
Преобразование двоичного NodeJS буфера в JavaScript ArrayBuffer
https://github.com/aws/aws-sdk-js/issues/2141

Шаги:
1. Установить: npm установить буфер
2. Обновить tsconfig.app. json включить типы ": [" node "] в" compilerOptions "
3. Добавить (окно как любое) .global = window; в src / app / pollyfills.ts 

uploadImage(url: string, contentType: string, imageData: any): Promise<any> {
    const headers = new HttpHeaders();
    if (contentType === 'jpeg') {
        headers.set('Content-Type', 'image/jpeg;');
    } else if (contentType === 'png') {
        headers.set('Content-Type', 'image/jpeg;');
    }

    const data = imageData.replace(/^data:image\/\w+;base64,/, '');
    const buff = new Buffer(data, 'base64');

    return this.http.put(url, buff.buffer, {headers: headers})
        .pipe(
            tap(data => console.log(JSON.stringify(data))),
            catchError(this.handleError('uploadImage'))
        ).toPromise();
}
...