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); }); }); } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
· 为什么 .NET8线程池 容易引发线程饥饿
· golang自带的死锁检测并非银弹
· 如何做好软件架构师
· 欧阳的2024年终总结,迷茫,重生与失业
· Bolt.new 30秒做了一个网站,还能自动部署,难道要吊打 Cursor?
· 史上最全的Cursor IDE教程
· 关于产品设计的思考
· 聊一聊 C#异步 任务延续的三种底层玩法
2018-12-10 Exception 'ReflectionException' with message 'Class require does not exist'