angular 8 表单带文件上传接口
<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 表单带文件上传接口的更多相关文章
- Struts2文件上传(基于表单的文件上传)
•Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目 •Commons-Fil ...
- [原创]java WEB学习笔记49:文件上传基础,基于表单的文件上传,使用fileuoload 组件
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- 传统表单提交文件上传,以及FormData异步ajax上传文件
传统的文件上传: 只用将form表单的entype修改成multipart/form-data,然后就可以进行文件上传,这种方式常用并且简单. 以下是另一种方式FormData,有时候我们需要ajax ...
- 表单多文件上传样式美化 && 支持选中文件后删除相关项
开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...
- ajax提交表单,支持文件上传
当我们提交表单但是又不想要刷新页面的时候就可以考虑使用ajax来实现提交功能,但是这有个局限就是当有文件上传的时候是行不通的,下面借助于jquery.form可以很方便满足我们的需求. 1.表单写 ...
- php+form表单的文件上传
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- AJAX 表单提交 文件上传
1. AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载 ...
- 2020最新Servlet+form表单实现文件上传(图片)
servlet实现文件上传接受 这几天学了一点文件上传,有很多不会,在网查了许多博客,但是最新的没有,都比较久了 因为我是小白,版本更新了,以前的方法自己费了好久才弄懂,写个随笔方便以后查找 代码奉上 ...
- form表单多文件上传
1.html/jsp主页 <%@ page language="java" contentType="text/html; charset=UTF-8" ...
随机推荐
- FL studio系列教程(十五):FL Studio文件菜单功能详讲
在FL Studio主控面板上的是其主菜单.主菜单包括:文件.编辑.添加.样式.查看.选项.工具和帮助.如下图所示: 为了帮助初学者快速的了解并能使用它制作出作品,今天小编将详细地为大家讲解下这些菜单 ...
- 用大白话讲大数据HBase,老刘真的很用心(1)
老刘今天复习HBase知识发现很多资料都没有把概念说清楚,有很多专业名词一笔带过没有解释.比如这个框架高性能.高可用,那什么是高性能高可用?怎么实现的高性能高可用?没说! 如果面试官听了你说的,会有什 ...
- Ubuntu16.04配置静态ip
1.安装好ubuntu16.04虚拟机之后,首先按照下图的步骤进行: 首先需要打开虚拟网络编辑器,点击VMnet8的虚拟网卡,如果没有这个网卡,只需在编辑虚拟机设置里面将网络适配器类型改为NAT模式, ...
- Java基础教程——反射机制
Java反射机制 Java反射机制是Java语言的一个重要特性,使得Java语言具备"动态性": 在运行时获取任意一个对象所属的类的相关信息; 在运行时构造任意一个类的对象: 在运 ...
- TIOBE 11月指数:C语言居首,稳居宝座,Python直逼第二!
官方网址:https://www.tiobe.com/tiobe-index/ 这是自近20年前TIOBE指数开始以来,Java和C第一次不再占据前两位.C仍然是第一位的,但是现在第二个位置是 ...
- CARDS主题 & 导航栏样式修改
每个人对于主题样式的感觉是不一样的,譬如字体大小,间距,高宽,距离,颜色等,我们可以一定程度内很直观地去修改主题的某些样式. 首先,在浏览器中利用开发者工具进行调试,找到我们所要改动的那部分结构,写入 ...
- dubbo起停之服务暴露
由上一节可知带上dubbo@Service注解的对象,在注册成为bean之后会进一步注册一个ServiceBean,服务暴露便是在这里 public void afterPropertiesSet() ...
- CentOS下解压缩
1 #gz 2 //压缩gz格式文件 3 gzip aa 4 //解压缩gz格式文件 5 gunzip -d aa.gz 6 //查看 7 Gunzip -l aa.gz 8 9 #bz 10 //压 ...
- CentOS rsync小结
前言 与cp,scp不同的是rsync工具不但可以本地拷贝,还可以远程拷贝以及同步数据. rsync工具在做数据备份方便非常受欢迎.试想一下,如果有数千万个文件或目录你怎么样制定拷贝计划呢?每一个选项 ...
- Spring 源码学习 04:初始化容器与 DefaultListableBeanFactory
前言 在前一篇文章:创建 IoC 容器的几种方式中,介绍了四种方式,这里以 AnnotationConfigApplicationContext 为例,跟进代码,看看 IoC 的启动流程. 入口 从 ...