在React应用程序中:
const onInputFileChange = (e: React.ChangeEvent) => {
const files = e.target.files;
if (!files || files.length === 0) {
return;
}
const file = files[0];
const formData = new FormData();
formData.append("file", file);
const uri = "path/to/my/endpoint/myc/12/upload";
const fetchOptions = {
method: "POST",
headers: [["Content-Type", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]],
mode: "cors",
body: formData
};
fetch(uri, fetchOptions).then(res => console.log(res));
};
return (
);我正在发送一个Excel文件。我有以下控制器:
[HttpPost("myc/{id}/upload")]
//[Consumes("multipart/form-data")] // This line is commented intentionally
public ActionResult UploadExcelFile(string id)
{
var form = this.Request.Form; // Exception here!!!
return Ok();
}当我在方法中设置一个断点(开始)时,我看到它被击中了。当我进一步进入第一行时,在读取时抛出异常
System.InvalidOperationException: 'Incorrect Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'尝试
如果我删除属性中的注释Consumes,我从来没有得到过这个方法;相反,我得到了一个415不支持的媒体类型。
尝试II
如果我将控制器的Consumes和请求的Content-Typ
两者均为:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,我得到相同的错误:
System.InvalidOperationException: 'Incorrect Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'尝试III
如果我像这样改变控制器:
[HttpPost("myc/{id}/upload")]
//[Consumes("multipart/form-data")]
public ActionResult UploadExcelFile(string id, IFormFile file)
{
var form = this.Request.Form;
return Ok();
}我收到一个400 Bad Request,但没有命中该方法。
我到底该怎么做?
发布于 2021-02-25 07:43:05
只需省略Content-Type请求和浏览器会为你设置一个正确的头。因为正确的值FormData是Content-Type: multipart/form-data; boundary=something
您需要让浏览器为您设置有效的边界值。
const file = files[0];
const formData = new FormData();
formData.append("file", file);
const uri = "path/to/my/endpoint/myc/12/upload";
const fetchOptions = {
method: "POST",
mode: "cors",
body: formData
};
fetch(uri, fetchOptions).then(res => console.log(res));https://stackoverflow.com/questions/66359451
复制相似问题