angular2^ typescript 将文件和Json数据合并发送到服务器（1.客户端处理）

git地址https://gitee.com/richard1015/AnchorSys/tree/master/src/app/service首先介绍下框架基本流程（web > webservice 【前端架构】） > （nodejs 【数据中转站】） >（api 【后台接口】）--web （html angular 框架）--webse...

weixin_30951389

133人浏览 · 2017-08-04 11:49:00

weixin_30951389 · 2017-08-04 11:49:00 发布

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);
        });
    }
}