react-native - Unhandled promise rejection: TypeError: Network request failed in react native
问题描述
I am new to react native. I have crated a form. from this form I am uploading images to server. But the problem not a single data uploading to server. So what is problem is my code is wrong or what please help . I am not getting any specific error. please help. thanks. and my other forms is submitting properly they have not any images to upload but only problem with this form becuase here is images to upload
here is my code
export default function Add(props) {
const { navigation } = props
const [singleFilePAN, setSingleFilePAN] = useState('');
const [singleFileADH, setSingleFileADH] = useState('');
const [singleFileADH1, setSingleFileADH1] = useState('');
const [singleFileSIGN, setSingleFileSIGN] = useState('');
const [imageArray, setImageArray] = useState({
PAN: null,
GST: null,
ADH: null,
ADH1: null,
});
const validateInputs = () => {
console.log(singleFilePAN)
console.log(singleFileADH)
console.log(singleFileADH1)
console.log(singleFileSIGN)
if (singleFilePAN && singleFileADH && singleFileADH1 && singleFileSIGN != null)
{
if (!/[A-Z]{5}[0-9]{4}[A-Z]{1}/.test(PAN) && imageArray.GST === null){
setPanError('Please Insert valid PAN Card Image \n And Valid Pan card number')
return;
}
if (!/^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/.test(GST)) {
setGstError('Please Insert valid GST Number')
return;
}
if (!/^\d{4}\s\d{4}\s\d{4}$/.test(ADH)) {
setAdhError('Please Insert valid Aadhar Card Image \n And Valid Adhar card number')
return;
}
else
{
//+++++++++++++++++++++++++++++++++=submitting form data to api start+++++++++++++++++++++++++++++++++++
{
const leadTagNumber = props.route.params.leadTagNumber
AsyncStorage.multiGet(["application_id", "created_by",'leadTagNumber']).then(response => {
const formData = new FormData();
formData.append('lead_tag_number',leadTagNumber);
formData.append('pan_card_number', PAN);
formData.append('gstin_number', GST);
formData.append('aadhar_card_number', ADH);
formData.append('idfy_pan_card_status', "Done");
formData.append('idfy_aadhar_card_status',"Done");
formData.append('entry_sorce', "App");
formData.append('created_by', response[1][1]);
formData.append('application_id', response[0][1]);
formData.append('is_active', "Y");
formData.append('is_deleted', "N");
formData.append('created_time', "");
formData.append('upload_pancard',
{
uri: singleFilePAN,
name: 'pancardImage.jpg',
type: 'image/jpg/png'
}
);
formData.append('upload_aadhar',
{
uri: singleFileADH,
name: 'upload_aadhar.jpg',
type: 'image/jpg/png'
}
);
formData.append('upload_aadhar_second',
{
uri: singleFileADH1,
name: 'upload_aadhar_second.jpg',
type: 'image/jpg/png'
}
);
formData.append('digital_signature',
{
uri: singleFileSIGN,
name: 'digital_signature.jpg',
type: 'image/jpg/png'
}
);
fetch('https://nasdigital.tech/Android_API_CI/upload_multipart_data', {
method: 'POST',
headers: {'Accept': 'application/json, text/plain, */*', "Content-Type": "application/json" },
body: formData
})
.then((returnValue) => returnValue.json())
.then(function(response) {
console.log(response)
Alert.alert("File uploaded");
return response.json();
});
});
// event.preventDefault();
}
//+++++++++++++++++++++++++++++++++submitting form data to api end++++++++++++++++++++++++++++++++++++++
Alert.alert("success")
return;
}
}
};
const takePicture = async (type) => {
if (camera) {
const data = await camera.takePictureAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
});
console.log(data.uri);
const newImageArr = imageArray;
if (imageType === 'PAN') {
newImageArr.PAN = data.uri;
}else if (imageType === 'ADH' && evenTry) {
newImageArr.ADH = data.uri;
setEvenTry((val) => !val);
} else if (imageType === 'ADH' && !evenTry) {
newImageArr.ADH1 = data.uri;
setEvenTry((val) => !val);
}
setImageArray({...newImageArr});
setShowCamera(false);
setImageType('');
setSingleFilePAN({ singleFilePAN: newImageArr.PAN});
setSingleFileADH({ singleFileADH: newImageArr.ADH});
setSingleFileADH1({ singleFileADH1: newImageArr.ADH1});
}
};
const pickImage = async (type) => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
});
console.log(result.uri);
if (!result.cancelled) {
const newImageArr = imageArray;
if (type === 'PAN') {
newImageArr.PAN = result.uri;
} else if (type === 'ADH' && evenTry) {
newImageArr.ADH = result.uri;
setEvenTry((val) => !val);
} else if (type === 'ADH' && !evenTry) {
newImageArr.ADH1 = result.uri;
setEvenTry((val) => !val);
}
setImageArray({ ...newImageArr });
setSingleFilePAN({ singleFilePAN: newImageArr.PAN});
setSingleFileADH({ singleFileADH: newImageArr.ADH});
setSingleFileADH1({ singleFileADH1: newImageArr.ADH1});
}
please ignore this = I am new to react native. I have crated a form. from this form I am uploading images to server. But the problem not a single data uploading to server. So what is problem is my code is wrong or what please help . I am not getting any specific error. please help. thanks
解决方案
我认为您通过图像传递的表单数据类型错误,如果您不传递要发送的数据类型,BE 可能不会得到它
代替
{
uri: singleFilePAN,
name: 'pancardImage.jpg', <- don't add extenstion
type: 'image/jpg/png' <- bad type
}
{
uri: singleFilePAN,
name: 'pancardImage',
type: 'image/jpg'
}
在此处检查所有 MIME 类型 -> MIME DOCS
推荐阅读
- c - 为什么玩家 1 的名字没有包含在下面的代码中?
- reactjs - Framer 运动根据其他元素偏移为 x 设置动画
- mysql - SQL 查询过滤到仅适用的行
- javascript - 如何动态计算给定对象数组的行跨度以显示表格
- forms - Rxwebvalidators 条件验证器在 formArray 的情况下不起作用
- java - 在 FOR 循环中使用 ParseObject
- python - Pandas 时间序列图:辅助 y 轴标签,设置下限
- c# - 如何在 C# 中检查代码是否在 AOT 中运行?
- azure - 如何使用 TOTP 通过 Azure AD MFA 对 VPN 进行身份验证?
- c - Arduino 和 SX1278 的 LoRa B 类实现 TDMA