如何使用angularjs2将上传的文件传递给API方法? [英] How to to pass uploaded file to API method using angularjs2?
本文介绍了如何使用angularjs2将上传的文件传递给API方法?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试使用以下代码,但我无法找到如何在我的webapi方法中获取上传的文件
import来自'@ angular / core'的{Component};
从'@ angular / common'导入{CORE_DIRECTIVES,FORM_DIRECTIVES,NgClass,NgStyle};
从'../../../ng2-file-upload'导入{FILE_UPLOAD_DIRECTIVES,FileUploader};
// webpack html进口
let template = require('./ simple-demo.html');
const URL ='https:// Controller / ActionNAme';
@Component({
selector:'simple-demo',
模板:模板,
指令:[FILE_UPLOAD_DIRECTIVES,NgClass,NgStyle,CORE_DIRECTIVES,FORM_DIRECTIVES]
})
导出类SimpleDemoComponent {
public uploader:FileUploader = new FileUploader({url:URL});
public hasBaseDropZoneOver:boolean = false;
public hasAnotherDropZoneOver:boolean = false;
public fileOverBase(e:any):void {
this.hasBaseDropZoneOver = e;
}
public fileOverAnother(e:any):void {
this.hasAnotherDropZoneOver = e;
}
}
我的尝试:
我试过
从'@ angular / core'导入{Component};
从'@ angular / common'导入{CORE_DIRECTIVES,FORM_DIRECTIVES,NgClass,NgStyle};
从'../../../ng2-file-upload'导入{FILE_UPLOAD_DIRECTIVES,FileUploader};
// webpack html进口
let template = require('./ simple-demo.html');
// const URL ='/ api /';
const URL ='https://evening-anchorage-3159.herokuapp.com/api/';
@Component({
selector:'simple-demo',
模板:模板,
指令:[FILE_UPLOAD_DIRECTIVES,NgClass,NgStyle,CORE_DIRECTIVES,FORM_DIRECTIVES]
})
导出类SimpleDemoComponent {
public uploader:FileUploader = new FileUploader({url:URL});
public hasBaseDropZoneOver:boolean = false;
public hasAnotherDropZoneOver:boolean = false;
public fileOverBase(e:any):void {
this.hasBaseDropZoneOver = e;
}
public fileOverAnother(e:any):void {
this.hasAnotherDropZoneOver = e;
}
}
需要在我的控制器方法中上传文件
Public ActionResult UploadFile(string uName,******)
{
如何使用AngulrJS2通过此控制器上传文件
}
解决方案
标记
< pre > < !DOCTYPE html >
< html >
< head > 跨度>
< title > AngularJS文件Upoad示例
http和FormData < / title >
< script src = http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js > < / script >
< / head >
&l t; body ng-app = fupApp >
< div < span class =code-attribute> ng-controller = fupController >
< input type = file id = file1 name = file multiple
< span class =code-attribute> ng-files = getTheFiles(
files) / >
< 输入 类型 = 按钮 ng-click = uploadFiles () value = 上传 / >
< / div < span class =code-keyword>>
< / body >
指令和控制ller
< script>
angular.module(' fupApp',[])
.directive( ' ngFiles',['
I have tried with the below code but i could not find out that how to get that uploaded file in my webapi method
import {Component} from '@angular/core'; import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle} from '@angular/common'; import {FILE_UPLOAD_DIRECTIVES, FileUploader} from '../../../ng2-file-upload'; // webpack html imports let template = require('./simple-demo.html'); const URL = 'https://Controller/ActionNAme'; @Component({ selector: 'simple-demo', template: template, directives: [FILE_UPLOAD_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES] }) export class SimpleDemoComponent { public uploader:FileUploader = new FileUploader({url: URL}); public hasBaseDropZoneOver:boolean = false; public hasAnotherDropZoneOver:boolean = false; public fileOverBase(e:any):void { this.hasBaseDropZoneOver = e; } public fileOverAnother(e:any):void { this.hasAnotherDropZoneOver = e; } }
What I have tried:
I have tried
import {Component} from '@angular/core'; import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle} from '@angular/common'; import {FILE_UPLOAD_DIRECTIVES, FileUploader} from '../../../ng2-file-upload'; // webpack html imports let template = require('./simple-demo.html'); // const URL = '/api/'; const URL = 'https://evening-anchorage-3159.herokuapp.com/api/'; @Component({ selector: 'simple-demo', template: template, directives: [FILE_UPLOAD_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES] }) export class SimpleDemoComponent { public uploader:FileUploader = new FileUploader({url: URL}); public hasBaseDropZoneOver:boolean = false; public hasAnotherDropZoneOver:boolean = false; public fileOverBase(e:any):void { this.hasBaseDropZoneOver = e; } public fileOverAnother(e:any):void { this.hasAnotherDropZoneOver = e; } }
need to get uploaded file in my controller method
Public ActionResult UploadFile(string uName, ******)
{
how to get ***** to upload file through this controller using AngulrJS2
}
解决方案
The Markup
<pre><!DOCTYPE html> <html> <head> <title>AngularJS File Upoad Example with
http and FormData</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> </head> <body ng-app="fupApp"> <div ng-controller="fupController"> <input type="file" id="file1" name="file" multiple ng-files="getTheFiles(
files)" /> <input type="button" ng-click="uploadFiles()" value="Upload" /> </div> </body>
The Directive and Controller
<script> angular.module('fupApp', []) .directive('ngFiles', ['
这篇关于如何使用angularjs2将上传的文件传递给API方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文