IFormFile拒绝从vue上传

Question

我正在使用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
}

我知道这个错误：

{“Microsoft.AspNetCore.Http.IFormFile”：{“：”无法创建Microsoft.AspNetCore.Http.IFormFile类型的实例。类型是接口或抽象类，不能实例化。路径‘，第1行，位置2。}，“类型”：“发生了https://tools.ietf.org/html/rfc7231#section-6.5.1","title":"One或更多验证错误。”，“状态”：400，“traceId”：“traceId 6d17d263-464344720128162b”}。

我试过的是：

1. 将[FromBody]替换为[FromForm]：端点已命中，但file为空，而[FromForm] [FromBody]导致的HTTP错误“方法不允许”

这里发生什么事情？

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