Angular4 後臺管理系統搭建（10） - 作一個通用的可跨域上傳文件的組件

    寫的很慢，不知不覺這是第十篇了。可是我其餘事情太多，只能抽空寫下。如今angular4或angular2流行的上傳方式是ng2-file-upload。它的功能很強大。可是我沒有配置成能夠跨域上傳的。好像是不支持跨域上傳，不知道對錯。jquery的插件 jQuery File Upload 能夠跨域上傳。可是想在angular4內使用jquery插件。須要找到全局jquery對象。也是很麻煩。因此這裏就本身實現一個可跨域上傳的功能。

    demo總體設計有三個站點，第一個是純前臺的，提供對html，js，各類資源的web訪問支持就能夠。能夠用iis，apache，nginx 來支撐。第二個是純後臺的用來提供restful接口服務，這裏用tomcat。第三個是資源站點。提供對用戶上傳的種種文件的訪問，能夠用iis，apache，nginx 。這裏三個站點詳細的url是：

     ①前臺   http://121.42.203.123       

　 ②後臺   http://121.42.203.123:8080     

     ③資源站點  http://121.42.203.123:83

    圖片上傳的流程是在前臺站點上傳文件，傳遞給後臺站點的接口。後臺站點把文件寫到資源站點上。框架內圖片上傳是能夠和表單上傳混合在一塊兒的。就是在一個post或put內，同時傳遞上傳文件和表單數據。可是這樣，上傳功能就是和具體業務關聯在一塊兒。咱們須要的通用性就丟失了。因此個人思路是父類組件內有一個文本框後面接一個按鈕。點擊按鈕彈出子組件一個小窗口。在小窗口內上傳文件。而後把遠程的文件路徑返回給父組件，傳遞到文本框內。作了兩個例子。一個是添加或修改用戶信息時。選取用戶頭像圖片的。

       

    還有一個是專門用來展現上傳操做demo的

    

   

    上傳文件組件html代碼以下，比較簡陋，也沒有預覽功能。之後在擴展吧。

<template #templateUploadFile>
  <div class="modal-header" style="background:#EAEAEA;">
    <h5 class="modal-title pull-left">
      <b>文件上傳</b>
    </h5>
    <button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="modal-body">
    <form #form="ngForm" enctype="multipart/form-data" novalidate>
      <input type="file" id="sef" name="sef" class="form-control" ngModel (change)="onSelectChange($event)">
      <div *ngIf="this.isError==true" style="color:red">{{this.stringError}}</div>
    </form>
  </div>
</template>

　　對應後臺代碼以下

 1 import { Component, OnInit, Input, Inject, ViewChild, TemplateRef, ElementRef, Output, EventEmitter } from '@angular/core';
 2 import { BsModalService } from 'ngx-bootstrap/modal';
 3 import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
 4 
 5 import { FileUploader, FileUploaderOptions } from 'ng2-file-upload';
 6 import ConstantsList from '../../common/constants/config';
 7 import { BackCode } from '../../module/common/common';
 8 import { UserNews } from '../../module/business/login';
 9 
10 @Component({
11   selector: 'app-uploadfile',
12   templateUrl: './uploadfile.component.html',
13   styleUrls: ['./uploadfile.component.css']
14 })
15 export class UploadfileComponent implements OnInit {
16 
17   @ViewChild('templateUploadFile') public template: TemplateRef<any>;
18   modalRef: BsModalRef;
19   ModalConfig = { animated: false, keyboard: false, backdrop: true, ignoreBackdropClick: true, };
20   @Input() public userNews: UserNews;
21   @Output() weburl: EventEmitter<string> = new EventEmitter<string>();
22   isError:boolean = false;
23   stringError:string;
24 
25   constructor(private modalService: BsModalService, @Inject('public_service') private publicservice: any) { }
26 
27   ngOnInit() { }
28 
29   openModal(template: TemplateRef<any>) {
30     this.modalRef = this.modalService.show(template, Object.assign({}, this.ModalConfig, { class: 'modal-sm' }));
31   }
32 
33   closeModal() {
34     this.modalRef.hide();
35     this.modalRef = null;
36     this.stringError = '';
37     this.isError = false;
38   }
39 
40   public show() {
41     this.openModal(this.template);
42     this.stringError = '';
43     this.isError = false;
44   }
45 
46   onSelectChange(event: EventTarget) {
47     let eventObj: MSInputMethodContext = <MSInputMethodContext>event;
48     let target: HTMLInputElement = <HTMLInputElement>eventObj.target;
49     let files: FileList = target.files;
50     let file: File = files[0];
51     
52     if(this.checkIsImage(file.name) == true) {
53       this.isError = false;
54       this.stringError = '';
55       let postData = null;
56       let sendtoken: string = this.userNews.id + '-' + this.userNews.token + '-' + ConstantsList.runid;
57 
58       this.publicservice.postWithFile1(sendtoken, postData, files).then(ub => {
59         let bc: BackCode = ub as BackCode;
60         this.weburl.emit(ConstantsList.HOSTPIC + bc.id);
61       });
62     } 
63     else{
64       this.isError = true;
65       this.stringError = '請肯定文件格式爲 jpg png jpeg bmp gif';
66     }
67   }
68 
69   checkIsImage(filename: string): boolean {
70     let filenameend:string = '|' + filename.slice(filename.lastIndexOf('.') + 1) + '|';
71     if ('|jpg|png|jpeg|bmp|gif|'.indexOf(filenameend.toLowerCase()) !== -1) {
72       return true;
73     } else {
74       return false;
75     }
76   }
77 
78 }

View Code

    服務端ssm框架內，接收post的地方關鍵就是要添加下面幾個信息。

  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Methods", "POST,GET,PUT,OPTIONS,DELETE");
  response.setHeader("Access-Control-Max-Age", "3600");
  response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Content-Type,Access-Token");

　其餘的接收文件。寫文件網上都不少例子。這裏用自定義的http頭信息進行校驗。防止其餘路徑上非法的post上傳文件。可是不是絕對的。這裏展現一下這個功能。

    demo演示地址是  http://121.42.203.123