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

  

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

  

    /**
* 保存或者更新老师布置的作业
* @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);
}); });
}

  

angular 8 表单带文件上传接口的更多相关文章

  1. Struts2文件上传(基于表单的文件上传)

    •Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目   •Commons-Fil ...

  2. [原创]java WEB学习笔记49:文件上传基础,基于表单的文件上传,使用fileuoload 组件

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  3. 传统表单提交文件上传,以及FormData异步ajax上传文件

    传统的文件上传: 只用将form表单的entype修改成multipart/form-data,然后就可以进行文件上传,这种方式常用并且简单. 以下是另一种方式FormData,有时候我们需要ajax ...

  4. 表单多文件上传样式美化 && 支持选中文件后删除相关项

    开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...

  5. ajax提交表单,支持文件上传

    当我们提交表单但是又不想要刷新页面的时候就可以考虑使用ajax来实现提交功能,但是这有个局限就是当有文件上传的时候是行不通的,下面借助于jquery.form可以很方便满足我们的需求.   1.表单写 ...

  6. php+form表单的文件上传

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. AJAX 表单提交 文件上传

    1. AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载 ...

  8. 2020最新Servlet+form表单实现文件上传(图片)

    servlet实现文件上传接受 这几天学了一点文件上传,有很多不会,在网查了许多博客,但是最新的没有,都比较久了 因为我是小白,版本更新了,以前的方法自己费了好久才弄懂,写个随笔方便以后查找 代码奉上 ...

  9. form表单多文件上传

    1.html/jsp主页 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

随机推荐

  1. 下载器Folx专业版有没有iTunes整合功能

    对于使用Mac系统的用户来说,相信对iTunes都不陌生.Folx专业版提供的iTunes整合功能,能将下载的音频.电影等文件自动同步到iTunes. 该功能将会有助于用户的音频.视频整合,对于喜欢听 ...

  2. python 几个循环的效率测试

    前言:对于我这种追求极致的人来说,效率很重要. 前面看到网上关于python循环的测评,到自己在项目中的应用,发现,并不是这么回事.所以,写下次博文,一次性了解这个问题. 语言版本:python3.6 ...

  3. workerman windows环境下无法启动问题

    问题描述 使用laravel框架composer加载workerman/gateway-worker扩展使用workerman做客服系统.通过laravel的command命令: php artisa ...

  4. QBXT 提高组储备营 2020.夏 游记

    DAY 1 是第一天呐!老师好强!讲得好仔细!连我都全懂了![doge] 突然对后面几天充满了期待-- 复习内容:二分,排序,贪心,搜索(好评) 新知识:Huffman树及Huffman编码,对拍,二 ...

  5. LeetCode周赛#209

    1609. 奇偶树 #广搜 #二叉树的层次遍历 题目链接 题意 如果一棵二叉树满足下述几个条件,则可以称为奇偶树 : 二叉树根节点所在层下标为 0 ,根的子节点所在层下标为 1 ,根的孙节点所在层下标 ...

  6. Java基础教程——缓冲流

    缓冲流 "缓冲流"也叫"包装流",是对基本输入输出流的增强: 字节缓冲流: BufferedInputStream , BufferedOutputStream ...

  7. Java集合【9】-- Vector源码解析

    目录 1.Vector介绍 2. 成员变量 3. 构造函数 4. 常用方法 4.1 增加 4.2 删除 4.3 修改 4.4 查询 4.5 其他常用函数 4.6 Lambda表达式相关的方法 4.7 ...

  8. 第8.13节 Python类中内置方法__repr__详解

    当我们在交互环境下输入对象时会直接显示对象的信息,交互环境下输入print(对象)或代码中print(对象)也会输出对象的信息,这些输出信息与两个内置方法:__str__方法和__repr__方法有关 ...

  9. Python中序列解包与函数的参数收集之间的关系

    在<第4.7节 Python特色的序列解包.链式赋值.链式比较>中老猿介绍了序列解包,<第5.2节 Python中带星号的函数参数实现参数收集>介绍了函数的参数收集,实际上函数 ...

  10. PyQt(Python+Qt)学习随笔:QListWidget获取指定行对应项的item()方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在列表部件中,可以通过item方法获取指定行对应的项,语法如下: QListWidgetItem i ...