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

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

我正在尝试向我的应用程序添加一个带有文件上传的输入.

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

<form class="form-horizo​​ntal" submit.delegate="doImport()"><div class="form-group"><label for="inputLangName" class="col-sm-2 control-label">语言键</label><div class="col-sm-10"><input type="text" value.bind="languageKey" class="form-control" id="inputLangName" placeholder="语言键">

<div class="form-group"><label for="inputFile" class="col-sm-2 control-label">上传文件</label><div class="col-sm-10"><input type="file" class="form-control" id="inputFile" accept=".xlsx" files.bind="files">

<div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">导入</button>

</表单>

在我的 webapi 中，我从 这里:

public class ImportLanguageController : ApiController{公共异步任务邮政(){//检查请求是否包含 multipart/form-data.如果 (!Request.Content.IsMimeMultipartContent()){抛出新的 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("服务器文件路径:" + file.LocalFileName);}返回 Request.CreateResponse(HttpStatusCode.OK);}捕获(System.Exception e){返回 Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);}}}

我终于在 Aurelia 有了我的视图模型:

import {inject} from 'aurelia-framework';从'aurelia-fetch-client'导入{HttpClient，json}；@inject(HttpClient)出口类进口{语言键 = 空；文件 = 空；构造函数(http){http.configure(config => {配置.useStandardConfiguration();});this.http = http;}做进口(){//这里是什么??}}

所以我的问题是，我的函数 doImport 中的逻辑是什么?我不确定 webapi 中控制器方法中的代码是否正确，请随时对此发表评论.

解决方案

这应该可以帮助您入门:

doImport() {var form = new FormData()form.append('语言', this.languageKey)form.append('file', this.files)//编辑，如果第一行不适合你，试试这个//form.append('file', this.files[0])this.http.fetch('YOUR_URL', {方法:'发布'，身体:形式}).then( 响应 => {//在这里做任何事});}

根据您提供的 webapi 响应(如果有)，您可能需要使用以下内容:

.then( response => response.json() ).then( 响应 => {//在这里做任何事});

我还应该提到的一件事是 fetch 使用 COR，因此如果您遇到任何 CORS 错误，您可能需要在服务器端启用它们.

这是 Aurelia 部分的 gist.run(除非您更改 URL，否则无法发布):gist.run/?id=6aa96b19bb75f727271fb061a260f>9p

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) //Edit, try this if the first line dont work for you //form.append('file', this.files[0]) 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