angular-file-upload后台webapiC#

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› c#›C#教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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         }