问题描述
我已经按照许多教程进行了许多组合,但是我仍然无法获得适当的负载以得到有效载荷,并且总是收到400错误的请求回复。
这是前端中的代码:
public uploadFile = (file: File) => {
console.log(file.name); /// <--- Correctly displays the name,so the files seems to be loaded correctly
const url = "/api/upload_resource";
const formData = new FormData();
formData.append('file',file);
formData.append('something',"else");
fetch(url,{
method: 'POST',headers:{"Content-Type": "multipart/form-data"},body: formData
})
.then((response: any) => { console.log(response);/* Done. Inform the user */ })
.catch((e) => { /* Error. Inform the user */ })
}
这是server.route中的条目
{ path: "/api/upload_resource",method: "POST",options:{handler: (e,h)=>{return h.response({}).code(200);},payload:{ maxBytes: 30485760,parse: true,output:'file',allow: ['multipart/form-data',"application/JSON"]
}
}
},
我正在使用hapi 19.x
解决方法
已解决
TLDR:
删除fetch调用中的标头,然后在服务器路由项的options.payload中添加另一个键multipart: {output: "file"}
现在这就是我的想法:
- 我设法在有效负载中添加了一个failAction方法,以便能够获得更详细的错误
payload:{failAction: async (r:any,h:any,e:any) => {console.log(e.message);},maxByt...
- failAction报告了以下错误
Invalid content-type header: multipart missing boundary
- 好吧,回到Google检查边界到底是什么。在设法添加边界之后,我收到了一条新的错误消息,清楚地表明了进度
Unsupported Media Type
我已经熟悉该错误消息。而且,根据其他帖子中的许多答案,解决方案似乎是在标题中添加"Content-Type": "multipart/form-data"
。但这导致了“错误的请求消息”问题,并且引用此错误的帖子建议将其删除。
所以我知道问题出在“错误的媒体类型”错误消息,并且解决方案应该在后端而不是前端。所以我只搜索了“不支持的媒体类型hapi”,发现路由中缺少一个有效负载选项。