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

我正在尝试将带有文件上载的输入添加到我的应用程序中

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

<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>

---

所以我的问题是，我的函数

doImport

中有什么逻辑？我不确定webapi中控制器方法中的代码是否正确，请随意发表评论。

这将帮助您开始：

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

  });
}

根据您提供的webapi响应（如果有），您可能希望使用以下内容：

.then( response => response.json() )
.then( response => {
   // do whatever here
});

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

以下是Aurelia部分的gist.run（除非更改URL，否则发布将无效）：

---

不得不对表单.append（'file'，this.files[0]）进行一个小的修改。@John idk y append不起作用，最后它给出了空的“表单”

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

  });
}

.then( response => response.json() )
.then( response => {
   // do whatever here
});