首先介绍下框架基本流程 （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 目前国内使用不是特别熟练，在国内搜索答案找不到，只好硬着头皮FQ看英文【英语不好只能用翻译软件了 ：( 】）
github stack overflow
https://github.com/asafdav/ng-csv
https://*.com/questions/37174759/how-do-you-post-a-formdata-object-in-angular-2
https://*.com/questions/36352405/file-upload-with-angular2-to-rest-api
https://*.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);
});
}
}
下篇文章主要介绍 后端 数据合并提交
如有写的不对的地方，请指出，并建议，谢谢 ：)