Угловая ошибка при загрузке изображения - PullRequest
Новая
       32

Угловая ошибка при загрузке изображения

0 голосов
/ 11 мая 2019

У меня есть угловое приложение, в котором мне нужно загрузить изображение на сервер (узел сервера).Я пробовал разные методы, которые я нашел в Интернете, но у меня одна и та же проблема со всеми из них: сервер не получает изображение.Если я использую простую форму HTML, сервер работает безупречно, я даже изменил библиотеку сервера с multer на express-upload, но проблема сохраняется, поэтому я почти уверен, что это угловая проблема.

HTML 

<form [formGroup]="imageForm" *ngIf="state == 2" (ngSubmit)="uploadImage()">
    <mat-form-field appearance="outline">
        <ngx-mat-file-input formControlName="image" placeholder="Imagen" accept="image/*"></ngx-mat-file-input>
        <mat-icon matSuffix color="primary">folder_open</mat-icon>
        <mat-error *ngIf="image.errors && (image.dirty || image.touched)">{{getImageMessage()}}</mat-error>
    </mat-form-field>
    <div>
        <button mat-stroked-button color="primary" (click)="closeModal()">Cancelar</button>
        <button mat-flat-button color="primary" [disabled]="image.errors" type="submit">Aceptar</button>
    </div>
</form>

TS (упрощенно) 

import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { FileValidator } from 'ngx-material-file-input';
import { HttpClient, HttpRequest, HttpEvent, HttpEventType, HttpHeaders } from '@angular/common/http';

import { WriteComponent } from './../../write/write.component';

import { RequestsService } from './../../services/requests.service';

@Component({
    selector: 'app-upload-image',
    templateUrl: './upload-image.component.html',
    styleUrls: ['./upload-image.component.scss']
})
export class UploadImageComponent implements OnInit {
    private uploadImageURL = '/ajax/upload/image/';
    private state = 0;

    private urlForm: FormGroup;
    private imageForm: FormGroup;

    private regexUrl = 'https?://.+';

    private image: FormControl = new FormControl('', [Validators.required, FileValidator.maxContentSize(5000000)]); // 5mb

    constructor(private dialogRef: MatDialogRef<WriteComponent>, private http: HttpClient) { }

    ngOnInit() {
        this.imageForm = new FormGroup({
            image: this.image
        });
    }

    private uploadImage() {
        const formData = new FormData();
        formData.append('image', this.imageForm.get('image').value);
        this.http.post(this.uploadImageURL, formData).subscribe(output => {
            console.log('File transfered');
        });
    }
}

Запрос браузера Данные формы: Изображение: [объект объекта], может быть, в этом проблема?

Всервер я все еще получаю req.files undefined

Ответы [ 3 ]

0 голосов
/ 12 мая 2019

Если вы отправляете изображение на сервер, вы должны использовать FormData

Пример 

const cardData = new FormData();
cardData.append('frontImage', this.frontImageFile, this.frontImageFile.name);
cardData.append('first_name', this.newCardForm.value.first_name);
cardData.append('email', this.newCardForm.value.email);

Дайте мне знать, если у вас все еще есть проблемы

0 голосов
/ 12 мая 2019

Хорошо, через несколько дней я вытащу это.

Ошибка присвоить this.image значение через шаблон. Я должен был сделать это, используя функцию и новую переменную, а затем при отправке присвоить это значение полю 'image':

HTML 

    <ngx-mat-file-input formControlName="image" placeholder="Imagen" accept="image/*" (change)="onFileChange($event)"></ngx-mat-file-input>

Ts 

private imgFile;

private uploadImage() {
    const formData = new FormData();
    formData.append('image', this.imgFile);
    this.req.uploadImage(formData).subscribe(output => {
        console.log(output);
    }, () => {
        console.log('Error');
    }, () => {
        console.log('Complete');
    });
}

private onFileChange(event) {
    if (event.target.files.length > 0) {
        const file = event.target.files[0];
        this.imgFile = file;
    } else {
        this.imgFile = null;
    }
}
0 голосов
/ 11 мая 2019

Есть несколько возможных решений вашей проблемы.

  1. Проверьте, установлен ли тип содержимого вашего сервера для получения multipart / form-data

  2. Попробуйте добавить type например, <any> здесь, в вашем методе POST, 

    uploadImage(): Promise<any> {
   const formData = new FormData();
   formData.append('image', this.imageForm.get('image').value);
   return this.http.post(this.uploadImageURL, formData)
     .toPromise()
     .catch((e) => {
       // error
   });
}

    В качестве ключевого момента удалите модификатор доступа private , чтобы сделать ваш метод POST общедоступным.

...