React Native 无法将图像上传到 API(内容类型和文件字段是必需的问题)。 2d 粘在上面:(
我已经在 stackoverflow 上尝试了一些关于这个问题的解决方案,但没有出路。这是我在调试器上的错误: 红色 = 图像文件详细信息 |蓝色=错误
我在这种情况下使用react-native-image-picker和axios。这是我的注册代码(为注册用户调用 API)
const API_HOST = {
url: 'http://skripsibackend.test:8081/api',
};
export const signUpAction =
(dataRegister, photoReducer, navigation) => dispatch => {
Axios.post(`${API_HOST.url}/register`, dataRegister)
.then(res => {
console.log('data success: ', res.data);
if (photoReducer.isUploadPhoto) {
const photoForUpload = new FormData();
photoForUpload.append('files', photoReducer);
Axios.post(`${API_HOST.url}/user/photo`, photoForUpload, {
headers: {
Authorization: `${res.data.data.token_type} ${res.data.data.access_token}`,
'Content-Type': 'multipart/form-data',
},
})
.then(resUpload => {
console.log('success upload: ', resUpload);
})
.catch(error => {
showMessage('Photo Upload Failed ');
console.log('image failed: ', error.response);
});
} else {
() => {};
}
dispatch(setLoading(false));
showMessage('Register Success', 'success');
navigation.replace('SignUpSuccess');
})
.catch(err => {
dispatch(setLoading(false));
console.log('sign up error: ', err.response);
showMessage('Error Sign Up');
});
};
,这是我的 photoReducer 代码:
export const photoReducer = (state = initPhoto, action) => {
if (action.type === 'SET_PHOTO') {
return {
...state,
uri: action.value.uri,
type: action.value.type,
name: action.value.name,
};
}
if (action.type === 'SET_UPLOAD_STATUS') {
return {
...state,
isUploadPhoto: action.value,
};
}
return state;
};
我尝试从内容类型中删除多部分/表单数据,这样它就可以 删除有关“multipart/form-data 中缺少边界”的错误。 是的,它可以消除该错误,但仍然出现另一个错误,那就是 “文件字段是必需的”。
正如您在调试器的错误图像中看到的,在红线上它是 有关我上传的图片的信息。
我已经测试了使用邮递员上传照片的 API,并且它有效。所以我认为我的API没有问题。我已经在这个错误上卡了两天了。对这个有什么想法吗? :)
I've try some solution on stackoverflow about this problem but there is no way out. This is my error on debugger :
RED = Image File Details | BLUE = Error
Im using react-native-image-picker and axios on this case. There is my code on sign up (to call API for register user)
const API_HOST = {
url: 'http://skripsibackend.test:8081/api',
};
export const signUpAction =
(dataRegister, photoReducer, navigation) => dispatch => {
Axios.post(`${API_HOST.url}/register`, dataRegister)
.then(res => {
console.log('data success: ', res.data);
if (photoReducer.isUploadPhoto) {
const photoForUpload = new FormData();
photoForUpload.append('files', photoReducer);
Axios.post(`${API_HOST.url}/user/photo`, photoForUpload, {
headers: {
Authorization: `${res.data.data.token_type} ${res.data.data.access_token}`,
'Content-Type': 'multipart/form-data',
},
})
.then(resUpload => {
console.log('success upload: ', resUpload);
})
.catch(error => {
showMessage('Photo Upload Failed ');
console.log('image failed: ', error.response);
});
} else {
() => {};
}
dispatch(setLoading(false));
showMessage('Register Success', 'success');
navigation.replace('SignUpSuccess');
})
.catch(err => {
dispatch(setLoading(false));
console.log('sign up error: ', err.response);
showMessage('Error Sign Up');
});
};
then, this is my photoReducer code :
export const photoReducer = (state = initPhoto, action) => {
if (action.type === 'SET_PHOTO') {
return {
...state,
uri: action.value.uri,
type: action.value.type,
name: action.value.name,
};
}
if (action.type === 'SET_UPLOAD_STATUS') {
return {
...state,
isUploadPhoto: action.value,
};
}
return state;
};
I've try to remove multipart/form-data from content-type, so it can
remove the error about "Missing Boundary in multipart/form-data".
Yeah, it can remove that error but stil came another error, that is
"The File field is required".
As u can see on my error image from debugger, on the RED LINE it was
the information about the picture I've upload.
I've test the API to upload photo using postman, and it works. so I think there is no problem on my API. I've stuck for 2 days on this error. Any idea for this one? :)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论