IFormFile 拒绝从 vue 上传答案

【问题标题】：IFormFile Refuses to upload from vueIFormFile 拒绝从 vue 上传
【发布时间】：2021-02-21 21:52:56
【问题描述】：

我正在使用 vuetify 的 v-file-input 组件

<v-row>
    <v-file-input label="File input"
                    v-model="file" />
    <v-btn depressed
            color="primary"
            @click="uploadClicked">
        Upload
    </v-btn>
</v-row>

尝试使用vue-resource 发布文件

this.$http.post(`${this.api}FileManager/Folder/${folderId}/File`, this.file);

我可以看到this.file 填充了所选文件，但由于某种原因，我无法让该文件出现在FileManagerController 的端点中：

[HttpPost("Folder/{folderId}/File")]
public async Task<IActionResult> UploadFile(Guid folderId, [FromBody]IFormFile file)
{
    // process the file
}

我收到此错误：

{"errors":{"":["无法创建Microsoft.AspNetCore.Http.IFormFile类型的实例。类型是接口或抽象类，无法实例化。路径''，第1行，位置2 ."]},"type":"https://tools.ietf.org/html/rfc7231#section-6.5.1","title":"出现一个或多个验证错误。","status":400 ,"traceId":"|6d17d263-464344720128162b."}

我尝试了什么：

用[FromForm]替换[FromBody]：端点被命中，但file是空的，Request.Form.Files也是空的
删除 [FromBody] 会导致 HTTP 错误“方法不允许”

这是怎么回事？

【问题讨论】：

您将 JSON 发送到接受表单的端点。
@CodeCaster 谢谢，你怎么知道？我如何告诉它不要那样做？
stackoverflow.com/questions/58802040/…, stackoverflow.com/questions/48502176/…

标签： c# asp.net-core vuetify.js vue-resource

【解决方案1】：

感谢 CodeCaster，我发现这是正确的配置

let formData = new FormData();
formData.append('file', this.file);
this.$http.post(`${this.api}FileManager/Folder/${folderId}/File`, formData);

控制器

[HttpPost("Folder/{folderId}/File")]
public async Task<IActionResult> UploadFile(Guid folderId, IFormFile file)
{
    // process the file
}

请注意，[FromBody] 不是必需的，如果不删除，实际上会导致 415

【讨论】：