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>

正在尝试 post 具有 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":{"":["Could not create an instance of type Microsoft.AspNetCore.Http.IFormFile. Type is an interface or abstract class and cannot be instantiated. Path '', line 1, position 2."]},"type":"https://tools.ietf.org/html/rfc7231#section-6.5.1","title":"One or more validation errors occurred.","status":400,"traceId":"|6d17d263-464344720128162b."}

我尝试了什么：

用 [FromForm] 替换 [FromBody] ：命中终点但 file 为空，Request.Form.Files
删除 [FromBody] 导致 HTTP 错误 'method not allowed'

这是怎么回事？

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

IFormFile 拒绝从 vue 上传

IFormFile Refuses to upload from vue

c#

asp.net-core

vue-resource

vuetify.js