• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

angular-file-upload后台webapiC#

原作者: [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         }

 

 

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

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
正则表达式(Java,C#,C++)发布时间:2022-07-14
下一篇:
C#泛型发布时间:2022-07-14
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap