Php 使用Angular 8将文件发布到Laravel服务器的正确方法

我正在尝试使用angular将一组文件以及一些其他数据发布到laravel服务器。文件信息在角度一侧设置，并且在发布数据时文件对象就在那里。但是，如果我只是返回请求，文件数据已经被删除，我得到一个空数组。不过，我其余的数据还不错

我的服务代码：

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;
                })
            );
    }

发布前的数据：

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答案中建议的标题，但得到了相同的结果 我还检查了php.ini中的文件上传、上传最大文件大小、发布最大文件大小

---

我的想法快用完了。请有人给我指一下正确的方向。我不知道为什么我不能发布文件？

你可以试试这样的方法

正如@Akram Wahid所建议的，请确保您已包含csrf令牌

关于文件发布，请参见下面的代码示例

你的角度模板

<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>

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);
            }
        })
  }
}

选择文件
提交

您的角度组件文件

<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>

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);
            }
        })
  }
}

导出类AppComponent{
fileData=null；
恩戈尼尼特（）{
}
fileProgress（fileInput:any）{
this.fileData=fileInput.target.files[0]；
}
onSubmit（）{
const formData=new formData（）；
formData.append（'file'，this.fileData）；
this.http.post（'url/to/your/api'，formData{
报告进展：是的，
观察：“事件”
})
.订阅（事件=>{
if（events.type==HttpEventType.UploadProgress）{
console.log（'Upload progress:'，Math.round（events.loaded/events.total*100）+'%'）；
}else if（events.type==HttpEventType.Response）{
console.log（事件）；
}
})
}
}

您是否从angular code传递了csrf令牌？如果您使用post方法进行路由，则需要传递csrf令牌。。。文件是否有效或是否有任何post请求？我有相当多的post请求，在没有此功能的情况下运行良好。要向服务器发出任何post请求，您需要从5.2.27开始从laravel传递csrf令牌，例外情况是，您使用的是自定义路由文件，不包括web中间件，或者您使用的是api路由。您使用的是哪个版本的laravel 5？嘿，laravel在我的例子中只是一个API。肯定不能生成csrf令牌吗？就像我提到的，从angular到api的所有其他post请求都可以正常工作，如果您使用的是

api

route，那么您就不需要了，我以为您使用的是web路由。就您所知，您必须生成csrf令牌并将其存储在头元数据上，稍后您可以通过javascript访问它。您好，谢谢，但这不会改变任何事情。正如我在@Akrim中提到的，我发布的是API路线，而不是web路线