所以在我的Vue组件中,我有以下文件上传对话框。
<div class="file has-name is-right">
<label class="file-label">
<input class="file-input" type="file" v-on:change="HandleFileUpload" accept=".pdf">
<span class="file-cta">
<span class="file-icon">
<i class="icon-file-pdf"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name" v-text="UploadFileName" style="width: 16em" />
</label>
</div>
[我的方法部分中的以下方法处理了它:
HandleFileUpload(e) {
var files = e.target.files || e.dataTransfer.files;
console.warn(files);
if(files.length > 0) {
var uploadFile = files[0];
this.UploadFileName = uploadFile.name;
var formData = new FormData();
formData.append('Foo', this.Foo);
formData.append('File', uploadFile, this.UploadFileName);
axios.post(
'/Foo/Upload',
data,
{ headers: { 'Content-Type': 'multipart/form-data' } }
).then(/* logic to handle callback */);
} else {
this.UploadFileName = null;
}
}
最后是我的MVC控制器,其中就是问题所在
[HttpPost]
public ActionResult Upload(FormCollection data)
{
var Foo= data.Get("Foo").Trim();
var Files = data.Get("File");
/* Rest of the method */
}
MVC控制器中的文件为空,尽管在用开发人员工具检查时,JS和网络调用中都填充了实际的文件数据。我在与FormCollection的FormData交互中缺少什么吗?
HttpContext context = System.Web.HttpContext.Current;
HttpPostedFile postedFile = context.Request.Files.Count > 0
? context.Request.Files.Get(0)
: null;