angular2^ typescript 將 檔案和Json資料 合并發送到伺服器（1.用戶端處理）

標籤：前端架構   入參   用戶端   angular   url   list   hone   調用   ebs   

首先介紹下架構基本流程   （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://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.用戶端處理）