如何使用angularjs2将上传的文件传递给API方法？ [英] How to to pass uploaded file to API method using angularjs2?

问题描述

我尝试使用以下代码，但我无法找到如何在我的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屋！