Угловая загрузка изображения в виде составных данных (NestJS Backend) - PullRequest
Новая
       10

Угловая загрузка изображения в виде составных данных (NestJS Backend)

0 голосов
/ 28 октября 2019

Я пытаюсь опубликовать изображение, используя форматы данных, в бэкэнд с поддержкой nestJS, и сталкиваюсь с проблемами, когда данные форм не определены, когда они достигают серверного конца. Я попытался загрузить изображение, используя почтальон, и оно работало как задумано.

Вот мой код для внешнего интерфейса: 

let blob = this.getBlob(results[i], ".png");
const file = new File([blob],name, {type:"image/png"});
let  postData = new FormData();

postData.append('file', file);

this.httpService.uploadUserPhoto(postData)
    .subscribe(res =>{
      console.log(res)
  }, error => {
 console.log(error);
this.unknownError(error.name);
})

И The Http Call 

uploadUserPhoto(data: FormData){
   return this.http.post(`${this.config.serverAddress}/api/user/photoUpload`, data)
 }

Backend использует встроенный File Intreceptor для обработки изображения, документы: https://docs.nestjs.com/techniques/file-upload

@Post('photoUpload')
    @UseGuards(AuthGuard)
    @UseInterceptors(FileInterceptor('file'))
    uploadFile(@User() user, @UploadedFile() file) {
        return this.profileService.saveFile(user,file)
    }

и код для сохранения загруженного изображения (в облаке Google) 

private fileUploader(userId: string, uploadedFile: any): Observable<any> {
     return new Observable(observer => {
           const fileName = `${userId}:${uniqId()}`;
           const file = this.photoBucket.file(fileName);

           const stream = file.createWriteStream({
                metadata: {
                  contentType: uploadedFile.mimetype
                 },
              resumable: false
        });

иВот ошибка, которую выдает файл intrecptor: 

[Nest] 26603   - 10/28/2019, 5:38:34 PM   [ExceptionsHandler] Cannot read property 'mimetype' of undefined +106042ms
TypeError: Cannot read property 'mimetype' of undefined
    at Observable.rxjs_1.Observable.observer [as _subscribe] (PATH/dist/services/user.profile.service.js:53:47)

И снова, загрузка файла изображения с помощью почтальона работает! Спасибо ...

1 Ответ

0 голосов
/ 01 ноября 2019

Хорошо, так что я нашел решение для этого. Прежде всего, вместо получения URL-адреса файла, получите base64 из средства выбора ионных изображений. Затем вы создаете блоб из этого base64 и добавляете его тип контента. Вы можете сделать это любым удобным для вас способом, но я сделал это через модуль узла, b64-to-blob (https://www.npmjs.com/package/b64-to-blob).). После этого вы создаете из него данные формы и, наконец, http post.

Вот код: 

if (this.user.photos.length < 5) {
            this.imagePicker.getPictures({
                maximumImagesCount: 1,
                quality: 50,
                outputType: 1
            })
                .then((results: string[]) => {
                    results.forEach(res => {
                        const contentType = 'image/png';
                        // @ts-ignore
                        let blob = b64toBlob(res, contentType);
                        let fd: FormData = new FormData();
                        fd.append('file', blob);
                        this.httpUpload(fd)
                    })

                }, (err) => {
                    this.unknownError(err);
                });

        }
...