使用Aurelia将数据和文件发布到ASP.NET webapi

本文介绍了使用Aurelia将数据和文件发布到ASP.NET webapi的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

这是我的视图，有两个输入，一个文本和一个文件：

< template> < form class =form-horizo​​ntalsubmit.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）： 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): gist.run/?id=6aa96b19bb75f727271fb061a260f945