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>

import { Component, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';

@Component({
    templateUrl: 'app/app-fileupload/fileupload.component.html'
})

export class FileUploadComponent implements OnInit {

    title = 'files upload';
    mysrc: string;
    constructor() { }
    ngOnInit(): void { }
    //初始化定义uploader变量,用来配置input中的uploader属性
    public uploader: FileUploader = new FileUploader({
        url: "http://localhost:52513/api/uploads",
        removeAfterUpload: true,
    });
    //定义事件，选择文件
    selectedFileOnChanged(event: any) {
        // 打印文件选择名称
        // console.log(event.target.value);
        
    }
    //定义事件，上传文件
    //为什么要把前端控件传过来，而不是用一个变量在前端用{{value}}的方法呢？
    //因为onSuccess内部所写的数据和外部不一个作用域，在后面改数据的值前台无反映，具体为啥，我也不知道。
    uploadFile(picId: HTMLImageElement, nguploader: HTMLInputElement) {
        if (nguploader.value == "") {
            alert('You have not select file!');
            return;
        }
        //上传跨域验证
        this.uploader.queue[0].withCredentials = false;
        //成功之后的回调函数
        this.uploader.queue[0].onSuccess = function (response, status, headers) {
            if (status == 200) {
                // 上传文件后获取服务器返回的数据
                //let tempRes = JSON.parse(response);
                this.mysrc = response;
                picId.src = response.replace('"', '').replace('"', '');
                nguploader.value = "";
            }
        };
        this.uploader.queue[0].upload(); // 开始上传
    }
}

webapi代码:

        [Route("api/uploads")]
        public IHttpActionResult PostUpload()
        {
            //多文件
            //HttpFileCollection myHttpFileCollection = HttpContext.Current.Request.Files;
            //单文件
            HttpPostedFile myHttpPostedFile = HttpContext.Current.Request.Files[0];
            string sPath = HttpContext.Current.Server.MapPath("/UploadFiles/");
            if (!Directory.Exists(sPath))
            {
                Directory.CreateDirectory(sPath);
            }
            myHttpPostedFile.SaveAs(sPath + myHttpPostedFile.FileName);
            string sReturn = "http://" + HttpContext.Current.Request.Url.Authority.ToString() + "/UploadFiles/" + myHttpPostedFile.FileName;
            return Ok(sReturn);//成功
        }

此例子目的是快速上手,功能都是最小的现实,如果想实现更多功能,by yourself.

因为入门之后怎么修改都有是容易的.哇哈哈~~~~~end