Правильный способ отправки файла на сервер Laravel с использованием Angular 8 - PullRequest
Новая
       2

Правильный способ отправки файла на сервер Laravel с использованием Angular 8

0 голосов
/ 06 января 2020

Я пытаюсь отправить массив файлов вместе с некоторыми другими данными на сервер laravel, используя angular. Информация о файле устанавливается на стороне angular, и объект File находится там, когда данные публикуются. Однако если я просто верну запрос, данные файла будут удалены, и я получу пустой массив. С остальными моими данными все в порядке.

Мой сервисный код: 

storeChecklistAnswers(checklistAnswers: ChecklistAnswersModel) {
        return this.http
            .post<any>(
                `${environment.apiUrl}/checklist/answers/store`,
                checklistAnswers,
                {
                    reportProgress: true,
                    headers: new HttpHeaders().append(
                        'enctype',
                        'multipart/form-data'
                    )
                }
            )
            .pipe(
                catchError(error => {
                    console.log(error);
                    let errors;
                    if (error.error.errors) {
                        errors = {
                            message: error.message,
                            errors: Object.values(error.error.errors)
                        };
                    } else if (error.error.message) {
                        errors = {
                            message: error.error.message
                        };
                    } else {
                        errors = {
                            message:
                                'An unknown error has occured. Please refresh the application'
                        };
                    }
                    return throwError(errors);
                }),
                tap(resultData => {
                    return resultData;
                })
            );
    }

В моем контроллере 

return response()->json([
            'data' => $request->all()
        ]);

Данные перед публикацией: 

images: Array(1)
0:
file: File
name: "292588.jpg"
lastModified: 1568349822014
lastModifiedDate: Fri Sep 13 2019 06:43:42 GMT+0200 (South Africa Standard Time) {}
webkitRelativePath: ""
size: 282431
type: "image/jpeg"
__proto__: File

Фактический ответ 

images: Array(1)
0:
file: []

Я пытался удалить заголовки, как предложено в некоторых ответах SO, но я получаю тот же результат, я также проверил file_uploads, upload_max_filesize, post_max_size в php .ini.

У меня заканчиваются идеи. Пожалуйста, кто-нибудь может указать мне в правильном направлении. Я не уверен, почему я не могу опубликовать файл?

1 Ответ

0 голосов
/ 06 января 2020

Вы можете попробовать что-то вроде этого.

Также, как @Akram Wahid предложил убедиться, что вы включили токен csrf.

А что касается публикации файла, смотрите ниже пример кода.

Ваш angular шаблон 

<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h3>Choose File</h3>
            <form (ngSubmit)="onSubmit()">
                <div class="form-group">
                    <input type="file" name="image"  />
                </div>
                <div class="form-group">
                    <button class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

Ваш angular файл компонента 

export class AppComponent {

    fileData = null;
    ngOnInit() {
    }

    fileProgress(fileInput: any) {
        this.fileData = <File>fileInput.target.files[0];
    }

    onSubmit() {
        const formData = new FormData();
        formData.append('file', this.fileData);
        this.http.post('url/to/your/api', formData, {
            reportProgress: true,
            observe: 'events'  
        })
        .subscribe(events => {
            if(events.type == HttpEventType.UploadProgress) {
                console.log('Upload progress: ', Math.round(events.loaded / events.total * 100) + '%');
            } else if(events.type === HttpEventType.Response) {
                console.log(events);
            }
        })
  }
}
...