IFormFile 拒绝从 vue 上传

Posted 2023-02-22

【中文标题】IFormFile 拒绝从 vue 上传

【英文标题】：IFormFile Refuses to upload from 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.apiFileManager/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 谢谢，你怎么知道？我如何告诉它不要那样做？

***.com/questions/58802040/…, ***.com/questions/48502176/…

【参考方案1】：

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

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

控制器

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

    // process the file

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