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}&param=${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.客户端处理)的更多相关文章

  1. angular2^ typescript 将 文件和Json数据 合并发送到服务器(2.服务端)

    nodejs 中使用框架 express web框架 multer 文件接受 直接贴代码了,我就不解释了 "use strict"; exports.__esModule = tr ...

  2. Newtonsoft.Json读取txt文件中json数据并存到SQL service 数据库!

    using System; using System.Collections.Generic; using System.Text; using System.IO; using Newtonsoft ...

  3. 关于引用JS和CSS文件刷新浏览器缓存问题,部署服务器后客户端样式不刷新

    问题描述 对样式的css文件进行了修改,部署到服务器后访问发现页面展示不正常,但是刷新之后就会展示正常. 问题分析 研究之后发现可能的原因有 css文件过大,加载缓慢 本地缓存问题,虽然服务器修改了c ...

  4. Python 编程快速上手 第十四章 处理 CSV 文件和 JSON 数据

    前言 这一章分为两个部分,处理 CSV 格式的数据和处理 JSON 格式个数据. 处理 CSV 理解 csv csv 的每一行代表了电子表格中的每一行,每个逗号分开两个单元格csv 的内容全部为文本, ...

  5. 游标、获取本地本地多个文件、Excel数据导入、跨服务器数据拷贝、行转列示例

    )='C:\Users\Administrator\Desktop\待处理数据\顺江学校4\' ---------------------------------------------------- ...

  6. 响应json数据之发送ajax的请求

    一.前端异步请求代码: <span style="font-size:14px;">$.ajax ({ type: "POST", //请求的方式 ...

  7. 阶段3 3.SpringMVC·_04.SpringMVC返回值类型及响应数据类型_7 响应json数据之发送ajax的请求

    编写conroller的方法 @RequestBody获取请求体的内容.当前请求体传递的是json字符串. 拿到了请求的内容

  8. 用java在客户端读取mongodb中的数据并发送至服务器

    使用Java自带的socket端口来实现,程序如下: Client.java package com.cn.gao; import java.net.*; import java.io.*; impo ...

  9. 利用jQuery中的serialize方法大量获取页面中表单的数据,发送的服务器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. linux 下 tomcat 安装

    下载 根据已安装的jdk版本选择合适的版本,否则不兼容 https://tomcat.apache.org/whichversion.html 选择合适的压缩包 源码 二进制:已针对固定的操作系统和机 ...

  2. ios开发 第三天

    1.复合 对象可以引用其它对象,可以利用其它对象提供的特性. 通过包含作为实例变量的对象指针实现的. 2.OC是单一继承 3.继承-重构 4.类实例化对象时,self指向了对象的首地址. 类对象isa ...

  3. 监控服务器ssh登录,并发送报警邮件

    最近想监控下云主机的ssh登录情况,所以开始写ssh登录报警监控.实现方式并不难. 一:邮箱申请开启SMTP 在邮箱中选择“设置”----->“账户” 在如下图处开启POP3/SMTP服务,并生 ...

  4. 使用BIOS进行键盘输入和磁盘读写

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  5. Redis进阶实践之七Redis和Lua初步整合使用

    一.引言        Redis学了一段时间了,基本的东西都没问题了.从今天开始讲写一些redis和lua脚本的相关的东西,lua这个脚本是一个好东西,可以运行在任何平台上,也可以嵌入到大多数语言当 ...

  6. linux_目录结构

    目录的作用是什么? 1. 归档和分类 2. 区分同名文件 什么是FHS? 目录层次标准,linux目录规范标准 linux系统目录有哪些特点? 1. 逻辑上所有目录都在 / 目录下,根目录是所有目录的 ...

  7. Java的IO系统

     Java IO系统     "对语言设计人员来说,创建好的输入/输出系统是一项特别困难的任务."     由于存在大量不同的设计方案,所以该任务的困难性是很容易证明的.其中最大的 ...

  8. Storm Topology Parallelism

    Understanding the Parallelism of a Storm Topology What makes a running topology: worker processes, e ...

  9. 【转】Matlab中的括号()[] {}

    Matlab中经常会用到括号去引用某Array或者是cell的内容,但三者有什么具体区别呢?] []

  10. python 将验证码保存到本地 读取 写入

    #验证码 #读取验证码网址.打开本地路径.写入.输入验证码 downpicture = urllib.request.urlopen(SecretCodeUrl).read() local = ope ...