当用户尝试上传非图像文件时,我尝试显示来自 REST API 的错误消息。
从 API 返回的 JSON 类似于:
{
"publicError": "Could not be uploaded, it is not an image!",
"innerError": "WrongImageTypeException()"
}
但我不知道它如何向用户显示。
我试过了
this.setState({ errorMesage: { ...err } })
控制台日志如下 https://cdn1.imggmi.com/uploads/2019/4/4/f642ed4326147b3f2c6899e78d415771-full.png 。
如何显示此响应错误消息?
后端代码
public ResponseEntity<?> uploadFile(
@RequestHeader(value = "Authorization") String authorizationHeader,
@RequestParam("file") MultipartFile file) throws UserNotFoundException {
try {
if(!(fileStorageService.checkFileType(file))){
throw new WrongImageTypeException();
}
}catch (WrongImageTypeException error){
return ResponseEntity.status(403).body(new ErrorMessageManager(
"Could not be uploaded, it is not an image!",error.toString()));
}
前端代码
this.state : {
errorMesage: {
publicError: "",
}, }
public uploadHandler() {
const formdata: FormData = new FormData();
formdata.set('file', this.state.avatar);
const config = {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': `Bearer ${cookies.get('tk879n')}`
}
};
axios.post(
`${serverUrl}/uploadFile`,
formdata,
config
).then(response => {
this.setState({
userProfile: {
...this.state.userProfile,
avatarUrl: response.data,
}
});
}
).catch((err) => {
// i want to set error message state and display in render function
this.setState({ errorMesage: { ...err } });
console.debug(this.state.errorMesage);
});
}
最佳答案
您的 console.debug(this.state.errorMesage);
显示对象的结构:
从结构中您可以看到 this.state.errorMesage.response.data
包含您正在查找的结构:
"publicError": "Could not be uploaded, it is not an image!",
"innerError": "WrongImageTypeException()"
修复
因此,您应该使用 ...err.response.data
而不是 ...err
👍🏻
关于java - 如何向最终用户显示 API 的错误消息?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55505384/