angular 8 表单带文件上传接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="homework">
 
    <form (ngSubmit)="doSubmit()" enctype="multipart/form-data">
 
                    <mat-label>作业标题</mat-label>
                    <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                    <input name="title" required [(ngModel)]="homeWork.title">
        <br>
 
                    <mat-label>作业内容</mat-label>
                    <textarea name="description" [(ngModel)]="homeWork.description" max-rows="4"></textarea>
        <br>
                    <mat-label>文件</mat-label>
                    <input name="file" type="file" (change)="upload($event)">
        <br>
 
        <button *ngIf="homeWork.id !== ''"
                aria-label="Delete"
                matTooltip="Delete">
            DELETE
        </button>
 
        <input type="submit" aria-label="SAVE" value="SAVE">
 
    </form>
 
</div>

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
upload(e): void{
    this.file = e.target.files[0];
}
 
doSubmit(): void {
    const formData: FormData = new FormData();
 
    formData.append('file', this.file);
    formData.append('id', this.homeWork.id);
    formData.append('title', this.homeWork.title);
    formData.append('description', this.homeWork.description);
    formData.append('teacher_id', this.authentication.id);
    formData.append('course_id', this.courseId);
 
    this._courseService.updateHomeWork(formData).then( (res) => {
        alert(res.msg);
    } );
 
 
}

  

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * 保存或者更新老师布置的作业
 * @param formData ,老师布置的作业
 */
updateHomeWork(formData ): Promise<any>
{
    return new Promise((resolve, reject) => {
        const header: HttpHeaders = new HttpHeaders();
        header.set('Content-Type', 'multipart/form-data');
        this._httpClient.post(this._fuseConfigService.configSnapshot.url + '/api.php/rest/homeworks/file',
            formData,
            {headers: header }
            )
            .subscribe(response => {
                // 添加成功后重新获取最新的作业信息
                this.getHomeWork();
                resolve(response);
            });
 
    });
}

  

posted @   fpc  阅读(1512)  评论(0编辑  收藏  举报
编辑推荐:
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
· 为什么 .NET8线程池 容易引发线程饥饿
· golang自带的死锁检测并非银弹
· 如何做好软件架构师
阅读排行:
· 欧阳的2024年终总结,迷茫,重生与失业
· Bolt.new 30秒做了一个网站,还能自动部署,难道要吊打 Cursor?
· 史上最全的Cursor IDE教程
· 关于产品设计的思考
· 聊一聊 C#异步 任务延续的三种底层玩法
历史上的今天:
2018-12-10 Exception 'ReflectionException' with message 'Class require does not exist'
点击右上角即可分享
微信分享提示