angular2^ typescript 将 文件和Json数据 合并发送到服务器(1.客户端处理)
git地址 https://gitee.com/richard1015/AnchorSys/tree/master/src/app/service
首先介绍下框架基本流程 (web > webservice 【前端架构】 ) > (nodejs 【 数据中转站 】) >(api 【后台接口】)
--web (html angular 框架)
--webservice(angular 中 编写的service文件 ,在此处原本可以使用 【ng2-file-upload】插件 文件+参数 合并提交,但是在我的项目中 请求需要统一提交,所以在此处 使用第三方插件不太适用
所以自己编写了XMLHttpRequest 进行 form data 合并提交, angular http post 是不可以的,所以使用了 XMLHttpRequest)
--nodejs (nodejs 做 webserver,从浏览器上传文件到后端服务器,nodejs 层只是做一个数据中转+参数加密 == ,nodejs 需)
--api ( 这个就简单介绍一下, php java .net nodejs == 都是可以得 只是统一好请求参数和 出入参数就ok)
》》》》本次参考文章有以下(可能angular2 目前国内使用不是特别熟练,在国内搜索答案找不到,只好硬着头皮翻墙看英文【英语不好只能用翻译软件了 :( 】)
github stack overflow
https://github.com/asafdav/ng-csv
https://stackoverflow.com/questions/37174759/how-do-you-post-a-formdata-object-in-angular-2
https://stackoverflow.com/questions/36352405/file-upload-with-angular2-to-rest-api
https://stackoverflow.com/questions/32423348/angular-post-uploaded-file
本篇文章 主要介绍 前端 (web > webservice 【前端架构】 ) 数据合并提交,下篇文章主要介绍 后端 数据合并提交
1. component
-----1. html 编写
<input type="file" (change)="filechange($event)" />
-----2. ts
import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
//引入 公共 service提交
import { ApiService, EditAlbumParam } from "app/service/api.service"; @Component({
selector: 'app-albumEdit',
templateUrl: './albumEdit.component.html',
styleUrls: ['./albumEdit.component.css']
})
export class AlbumEditComponent implements OnInit { private albumTypeData;
private file: File[];
private editAlbumParam: EditAlbumParam = new EditAlbumParam();
constructor(
private api: ApiService,
private router: Router) { } ngOnInit() { }
//主要实现方法 当文件修改时 接受一下
filechange(event) {
this.file = event.srcElement.files;
}
//提交事件
submit() {
//将参数和文件统一提交
this.api.editAlbum(this.editAlbumParam, this.file).subscribe(res => {
if (res.State == 0) {
alert("添加成功!");
}
});
}
}
2. api.service.ts (所有component 进行 api 请求的必进之路)
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from "@angular/http";
import { Observable } from "rxjs/Rx";
import "rxjs/Rx";
import { UploadService } from "app/service/upload.service";
@Injectable()
export class ApiService { constructor(private http: Http, private upload: UploadService) { } private post(data: ParamData): Observable<ResponseInfo> {
let host = "/serverH5";
let bodyObj = {
cmd: data.cmd,
param: JSON.stringify(data.param)
};
let body = `cmd=${data.cmd}¶m=${JSON.stringify(data.param)}`;
console.log("send infomation : " + body);
//当发现文件流时 进行 form data 合并提交 调用公用upload service
if (data.file) {
return this.upload.makeFileRequest(host, bodyObj, data.file).map(res => res as ResponseInfo)
.filter((res: ResponseInfo) => {
console.log(res);
if (res.State == 1) {
alert(res.Msg);
}
return res.State == 0;
});
} else {
let myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');
return this.http.post(
host,
body,
{ headers: myHeaders }
)
.map(res => res.json() as ResponseInfo)
.filter((res: ResponseInfo) => {
console.log(res);
if (res.State == 1) {
alert(res.Msg);
}
return res.State == 0;
});
}
} //登录
login(param: LoginParam) {
return this.post(new ParamData("LoginBySms", param));
}
//发送验证码
sendCode(param: LoginParam) {
return this.post(new ParamData("SmsULogin", param));
}
//获取专辑类型
getAlbumType() {
return this.post(new ParamData("AlbumType", {}));
}
//获取专辑列表
getAlbumList(param: AlbumListParam) {
return this.post(new ParamData("MyAlbumList", param));
}
//添加修改专辑
editAlbum(param: EditAlbumParam, file?: File[]) {
return this.post(new ParamData("UserAddAlbum", param, file));
}
}
export class ParamData {
/**
*
*/
constructor(
public cmd: string,
public param: object,
public file?: File[]
) {
}
}
export class ResponseInfo {
/**
*
*/
constructor(
public State?: number,
public Msg?: string,
public Value?: any
) {
}
}
export class LoginParam {
public Phone?: number;
public Code?: number;
}
export class AlbumListParam {
public PageIndex: number;
public PageSize: number;
public Guid: string;
public CType?: string;
}
export class EditAlbumParam {
public Name: string;
public Guid: string;
public Introduce: string;
public Id: number;
public Price: string;
public CTypeId: string;
public RId: number;
public RType: number;
}
3. upload service.ts 编写
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/share';
@Injectable()
export class UploadService {
[x: string]: any;
constructor() {
this.progress$ = Observable.create(observer => {
this.progressObserver = observer
}).share();
} public makeFileRequest(url: string, postData: any, files: File[]): Observable<Response> {
return Observable.create(observer => {
let formData: FormData = new FormData(),
xhr: XMLHttpRequest = new XMLHttpRequest();
//formData 文件流追加
for (let i = 0; i < files.length; i++) {
formData.append("uploads[]", files[i], files[i].name);
}
//formData 参数追加
if (postData !== "" && postData !== undefined && postData !== null) {
for (var property in postData) {
if (postData.hasOwnProperty(property)) {
formData.append(property, postData[property]);
}
}
} xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
observer.next(xhr.response);
observer.complete();
} else {
observer.error(xhr.response);
}
}
}; xhr.upload.onprogress = (event) => {
this.progress = Math.round(event.loaded / event.total * 100); this.progressObserver.next(this.progress);
}; xhr.open('POST', url, true);
xhr.send(formData);
});
}
}
下篇文章主要介绍 后端 数据合并提交
如有写的不对的地方,请指出,并建议,谢谢 :)
angular2^ typescript 将 文件和Json数据 合并发送到服务器(1.客户端处理)的更多相关文章
- angular2^ typescript 将 文件和Json数据 合并发送到服务器(2.服务端)
nodejs 中使用框架 express web框架 multer 文件接受 直接贴代码了,我就不解释了 "use strict"; exports.__esModule = tr ...
- Newtonsoft.Json读取txt文件中json数据并存到SQL service 数据库!
using System; using System.Collections.Generic; using System.Text; using System.IO; using Newtonsoft ...
- 关于引用JS和CSS文件刷新浏览器缓存问题,部署服务器后客户端样式不刷新
问题描述 对样式的css文件进行了修改,部署到服务器后访问发现页面展示不正常,但是刷新之后就会展示正常. 问题分析 研究之后发现可能的原因有 css文件过大,加载缓慢 本地缓存问题,虽然服务器修改了c ...
- Python 编程快速上手 第十四章 处理 CSV 文件和 JSON 数据
前言 这一章分为两个部分,处理 CSV 格式的数据和处理 JSON 格式个数据. 处理 CSV 理解 csv csv 的每一行代表了电子表格中的每一行,每个逗号分开两个单元格csv 的内容全部为文本, ...
- 游标、获取本地本地多个文件、Excel数据导入、跨服务器数据拷贝、行转列示例
)='C:\Users\Administrator\Desktop\待处理数据\顺江学校4\' ---------------------------------------------------- ...
- 响应json数据之发送ajax的请求
一.前端异步请求代码: <span style="font-size:14px;">$.ajax ({ type: "POST", //请求的方式 ...
- 阶段3 3.SpringMVC·_04.SpringMVC返回值类型及响应数据类型_7 响应json数据之发送ajax的请求
编写conroller的方法 @RequestBody获取请求体的内容.当前请求体传递的是json字符串. 拿到了请求的内容
- 用java在客户端读取mongodb中的数据并发送至服务器
使用Java自带的socket端口来实现,程序如下: Client.java package com.cn.gao; import java.net.*; import java.io.*; impo ...
- 利用jQuery中的serialize方法大量获取页面中表单的数据,发送的服务器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- linux 下 tomcat 安装
下载 根据已安装的jdk版本选择合适的版本,否则不兼容 https://tomcat.apache.org/whichversion.html 选择合适的压缩包 源码 二进制:已针对固定的操作系统和机 ...
- ios开发 第三天
1.复合 对象可以引用其它对象,可以利用其它对象提供的特性. 通过包含作为实例变量的对象指针实现的. 2.OC是单一继承 3.继承-重构 4.类实例化对象时,self指向了对象的首地址. 类对象isa ...
- 监控服务器ssh登录,并发送报警邮件
最近想监控下云主机的ssh登录情况,所以开始写ssh登录报警监控.实现方式并不难. 一:邮箱申请开启SMTP 在邮箱中选择“设置”----->“账户” 在如下图处开启POP3/SMTP服务,并生 ...
- 使用BIOS进行键盘输入和磁盘读写
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- Redis进阶实践之七Redis和Lua初步整合使用
一.引言 Redis学了一段时间了,基本的东西都没问题了.从今天开始讲写一些redis和lua脚本的相关的东西,lua这个脚本是一个好东西,可以运行在任何平台上,也可以嵌入到大多数语言当 ...
- linux_目录结构
目录的作用是什么? 1. 归档和分类 2. 区分同名文件 什么是FHS? 目录层次标准,linux目录规范标准 linux系统目录有哪些特点? 1. 逻辑上所有目录都在 / 目录下,根目录是所有目录的 ...
- Java的IO系统
Java IO系统 "对语言设计人员来说,创建好的输入/输出系统是一项特别困难的任务." 由于存在大量不同的设计方案,所以该任务的困难性是很容易证明的.其中最大的 ...
- Storm Topology Parallelism
Understanding the Parallelism of a Storm Topology What makes a running topology: worker processes, e ...
- 【转】Matlab中的括号()[] {}
Matlab中经常会用到括号去引用某Array或者是cell的内容,但三者有什么具体区别呢?] []
- python 将验证码保存到本地 读取 写入
#验证码 #读取验证码网址.打开本地路径.写入.输入验证码 downpicture = urllib.request.urlopen(SecretCodeUrl).read() local = ope ...