使用Aurelia将数据和文件发布到ASP.NET webapi [英] Posting data and file with Aurelia to ASP.NET webapi
问题描述
这是我的视图，有两个输入，一个文本和一个文件：
< template>
< form class =form-horizontalsubmit.delegate =doImport（）>
< div class =form-group>
< label for =inputLangNameclass =col-sm-2 control-label>语言键< / label>
< div class =col-sm-10>
< input type =textvalue.bind =languageKeyclass =form-controlid =inputLangNameplaceholder =Language key>
< / div>
< / div>
< div class =form-group>
< label for =inputFileclass =col-sm-2 control-label>上传文件< / label>
< div class =col-sm-10>
< input type =fileclass =form-controlid =inputFileaccept =。xlsxfiles.bind =files>
< / div>
< / div>
< div class =form-group>
< div class =col-sm-offset-2 col-sm-10>
< button type =submitclass =btn btn-default> Do import< / button>
< / div>
< / div>
< / form>
< / template>
在我的webapi中，我有这个代码，我从这里：
public class ImportLanguageController：ApiController
{
public async Task< HttpResponseMessage> Post（）
{
//检查请求是否包含multipart / form-data。
if（！Request.Content.IsMimeMultipartContent（））
{
throw new HttpResponseException（HttpStatusCode.UnsupportedMediaType）;
}
string root = HttpContext.Current.Server.MapPath（〜/ App_Data）;
var provider = new MultipartFormDataStreamProvider（root）;
尝试
{
//读取表单数据。
等待Request.Content.ReadAsMultipartAsync（provider）;
//这说明如何获取文件名。
foreach（provider.FileData中的MultipartFileData文件）
{
//Trace.WriteLine(file.Headers.ContentDisposition.FileName）;
//Trace.WriteLine(\"Server file path：+ file.LocalFileName）;
}
返回Request.CreateResponse（HttpStatusCode.OK）;
catch（System.Exception e）
{
return Request.CreateErrorResponse（HttpStatusCode.InternalServerError，e）;
最后我有我的看法模型在Aurelia：
pre $ 从'aurelia-framework'导入{inject};
从'aurelia-fetch-client'导入{HttpClient，json};
@inject（HttpClient）
export class Import {
languageKey = null;
files = null;
构造函数（http）{
http.configure（config => {
config
.useStandardConfiguration（）;
}）;
this.http = http;
}
doImport（）{
//这里有什么？
$ b所以我的问题是， doImport ？我不确定在webapi中我的控制器方法中的代码是否正确，请随时对此进行评论。解决方案这应该可以帮助你开始：
$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $变量表单=新FormData（）
form.append（'language'，this.languageKey）
form.append（'file'，this.files）
this.http.fetch（'YOUR_URL'，{
方法：'post'，
body：form
}）
.then（response => {
//在这里做任何事
} ）;
$ b $ p
$ b
根据您提供的webapi响应（如果有的话）如下：
.then（response => response.json（））
.then（response => {
//在这里做
}）;
我还要提的一点是fetch使用COR，所以如果你得到任何CORS错误以便在服务器端启用它们。
这里是Aurelia部分的gist.run（发布将不起作用，除非你改变URL）：
< a href =https://gist.run/?id=6aa96b19bb75f727271fb061a260f945 =noreferrer> https://gist.run/?id=6aa96b19bb75f727271fb061a260f945
I'm trying to add an input with file upload to my application.
This is my view with two inputs, one text and one file:
<template>
<form class="form-horizontal" submit.delegate="doImport()">
<div class="form-group">
<label for="inputLangName" class="col-sm-2 control-label">Language key</label>
<div class="col-sm-10">
<input type="text" value.bind="languageKey" class="form-control" id="inputLangName" placeholder="Language key">
</div>
</div>
<div class="form-group">
<label for="inputFile" class="col-sm-2 control-label">Upload file</label>
<div class="col-sm-10">
<input type="file" class="form-control" id="inputFile" accept=".xlsx" files.bind="files">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Do import</button>
</div>
</div>
</form>
</template>
In my webapi I have this code which I copied and pasted from here:
public class ImportLanguageController : ApiController
{
public async Task<HttpResponseMessage> Post()
{
// Check if the request contains multipart/form-data.
if (!Request.Content.IsMimeMultipartContent())
{
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}
string root = HttpContext.Current.Server.MapPath("~/App_Data");
var provider = new MultipartFormDataStreamProvider(root);
try
{
// Read the form data.
await Request.Content.ReadAsMultipartAsync(provider);
// This illustrates how to get the file names.
foreach (MultipartFileData file in provider.FileData)
{
//Trace.WriteLine(file.Headers.ContentDisposition.FileName);
//Trace.WriteLine("Server file path: " + file.LocalFileName);
}
return Request.CreateResponse(HttpStatusCode.OK);
}
catch (System.Exception e)
{
return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
}
}
}
At last I have my view model in Aurelia:
import {inject} from 'aurelia-framework';
import {HttpClient, json} from 'aurelia-fetch-client';
@inject(HttpClient)
export class Import {
languageKey = null;
files = null;
constructor(http){
http.configure(config => {
config
.useStandardConfiguration();
});
this.http = http;
}
doImport() {
//What goes here??
}
}
So my question is, what logic goes in my function doImport? I'm not sure the code in my controller method in the webapi is correct, feel free to have comments on that.
解决方案 This should help you get started:
doImport() {
var form = new FormData()
form.append('language', this.languageKey)
form.append('file', this.files)
this.http.fetch('YOUR_URL', {
method: 'post',
body: form
})
.then( response => {
// do whatever here
});
}
Depending on the webapi response you provide (if any) you may want to use following:
.then( response => response.json() )
.then( response => {
// do whatever here
});
One thing I should mention too is that fetch uses COR so if you get any CORS error you may need to enable them on the server side.
Here's a gist.run for the Aurelia part (posting won't work unless you change the URL):
https://gist.run/?id=6aa96b19bb75f727271fb061a260f945
这篇关于使用Aurelia将数据和文件发布到ASP.NET webapi的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
