angular-file-upload 後臺webapi C#

angular-file-upload 怎麼設置加載環境,隨便一搜索一大堆,我就不寫了.

主要寫一下現實功能:

1.單個圖片文件上傳,上傳完成以後顯示圖片,同時清空選擇的文件,在上傳時須要從新選擇.【多選,什麼參數之類,請參考其它博客】

2.C#編寫webapi 保存前端傳過來的文件.返回保存的網頁路徑.

前端代碼:

{{title}}
<div>
    <!--<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple />-->
    <input type="file" #nguploader ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />
    <input type="button" (click)="uploadFile(picId,nguploader)" value="上傳" />
</div>
<div>
    <img #picId>
</div>

 

 1 import { Component, OnInit } from '@angular/core';
 2 import { FileUploader } from 'ng2-file-upload';
 3 
 4 @Component({
 5     templateUrl: 'app/app-fileupload/fileupload.component.html'
 6 })
 7 
 8 export class FileUploadComponent implements OnInit {
 9 
10     title = 'files upload';
11     mysrc: string;
12     constructor() { }
13     ngOnInit(): void { }
14     //初始化定義uploader變量,用來配置input中的uploader屬性
15     public uploader: FileUploader = new FileUploader({
16         url: "http://localhost:52513/api/uploads",
17         removeAfterUpload: true,
18     });
19     //定義事件，選擇文件
20     selectedFileOnChanged(event: any) {
21         // 打印文件選擇名稱
22         // console.log(event.target.value);
23         
24     }
25     //定義事件，上傳文件
26     //爲何要把前端控件傳過來，而不是用一個變量在前端用{{value}}的方法呢？
27     //由於onSuccess內部所寫的數據和外部不一個做用域，在後面改數據的值前臺無反映，具體爲啥，我也不知道。
28     uploadFile(picId: HTMLImageElement, nguploader: HTMLInputElement) {
29         if (nguploader.value == "") {
30             alert('You have not select file!');
31             return;
32         }
33         //上傳跨域驗證
34         this.uploader.queue[0].withCredentials = false;
35         //成功以後的回調函數
36         this.uploader.queue[0].onSuccess = function (response, status, headers) {
37             if (status == 200) {
38                 // 上傳文件後獲取服務器返回的數據
39                 //let tempRes = JSON.parse(response);
40                 this.mysrc = response;
41                 picId.src = response.replace('"', '').replace('"', '');
42                 nguploader.value = "";
43             }
44         };
45         this.uploader.queue[0].upload(); // 開始上傳
46     }
47 }

webapi代碼:

 1         [Route("api/uploads")]
 2         public IHttpActionResult PostUpload()
 3         {
 4             //多文件
 5             //HttpFileCollection myHttpFileCollection = HttpContext.Current.Request.Files;
 6             //單文件
 7             HttpPostedFile myHttpPostedFile = HttpContext.Current.Request.Files[0];
 8             string sPath = HttpContext.Current.Server.MapPath("/UploadFiles/");
 9             if (!Directory.Exists(sPath))
10             {
11                 Directory.CreateDirectory(sPath);
12             }
13             myHttpPostedFile.SaveAs(sPath + myHttpPostedFile.FileName);
14             string sReturn = "http://" + HttpContext.Current.Request.Url.Authority.ToString() + "/UploadFiles/" + myHttpPostedFile.FileName;
15             return Ok(sReturn);//成功
16         }

 

 

此例子目的是快速上手,功能都是最小的現實,若是想實現更多功能,by yourself.

由於入門以後怎麼修改都有是容易的.哇哈哈~~~~~end