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" ...
随机推荐
- Vegas视频FX功能详解
今天呢,小编就带大家走进Vegas(Win系统)视频FX的世界.那么什么是视频FX呢,就是视频制作软件Vegas中自带添加特效的地方,它可以用于添加模糊,黑白,镜像等滤镜效果,各种高大上的视频大片都需 ...
- 关于Vegas制作黑白负片爆闪效果的教程分享
作为一款视频剪辑软件,Vegas界面简洁,操作难度低,比较容易上手,今天小编就带大家了解Vegas制作超级炫酷的黑白负片爆闪效果的操作过程. 1.导入视频 首先,双击打开视频剪辑软件Vegas Pro ...
- Folx好用的下载功能介绍
Folx作为一款使用便捷的Mac系统下载软件,为用户提供了网页链接捕获.种子文件下载.智能标签等功能,而其Folx专业版更为用户提供了智能控制速度.计划下载任务.种子文件搜索下载等更加智能化的功能. ...
- 错误原因:因为desc是mysql里面的关键字
SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check ...
- bash反弹shell检测
1.进程 file descriptor 异常检测 检测 file descriptor 是否指向一个socket 以重定向+/dev/tcp Bash反弹Shell攻击方式为例,这类反弹shell的 ...
- 适合 Java 新手的开源项目集合——在 GitHub 学编程
作者:HelloGitHub--老荀 当今互联网份额最大的编程语言是哪一个?是 Java!这两年一直有听说 Java 要不行了.在走下坡路了.没错,Java 的确在走下坡路,未来的事情的确不好说,但是 ...
- uniapp cli版本中如何引入scss?
一.安装依赖 npm i node-sass@4.14.1 sass-loader -D 二.在脚手架版本新建项目成功后,官方为我们准备了uni.scss文件,在这个里面写即可全局使用. ... 一. ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 第5.4节 Python函数中的变量及作用域
一.函数中的变量使用规则 函数执行时,使用的全局空间是调用方的全局空间,参数及函数使用的局部变量存储在函数单独的局部名字空间内: 函数的形参在函数中修改了值时,并不影响调用方本身的数据,但如果形参是一 ...
- Python中的enumerate函数的作用
enumerate函数是将一个可迭代对象中元素,按元素顺序每个增加一个索引值,将其组成一个索引序列,利用它可以同时获得索引和值,这样做的目的是为了将一个可迭代对象中元素组成一个"索引,值&q ...