我的代码有什么问题。数据不发送或上传到服务器与 multipart in react native

Question

我是新来的本地人。我已经从这个表单创建了一个表单，我正在使用 multipart formData 发送和上传图像到服务器。但问题是当我提交的数据没有进入服务器时。并且不会出现任何错误。所以请告诉我是不是写错了代码。或者是什么问题。我在代码中犯了什么错误。

这是我的代码。

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(JSON.stringify('lead_tag_number',leadTagNumber));
formData.append(JSON.stringify('pan_card_number', PAN));
formData.append(JSON.stringify('aadhar_card_number', GST));
formData.append(JSON.stringify('idfy_pan_card_status', "Done"));
formData.append(JSON.stringify('idfy_aadhar_card_status',"Done"));
formData.append(JSON.stringify('entry_sorce', "App"));
formData.append(JSON.stringify('created_by', response[1][1]));
formData.append(JSON.stringify('application_id', response[0][1]));
formData.append(JSON.stringify('is_active', "Y"));
formData.append(JSON.stringify('is_deleted', "N"));
formData.append(JSON.stringify('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://xyz.tech/Android_API_CI/_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});
    }

Answer 1

此处仅在表单数据中使用 JSON.stringify('','') 时才发送密钥。

您必须在附加键和值时分别放置键和值。

例如：

formData.append('lead_tag_number',leadTagNumber);
formData.append('pan_card_number', PAN);
formData.append('aadhar_card_number', GST);
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', "");

我的代码有什么问题。数据不发送或上传到服务器与 multipart in react native

What is wrong with my code. Data not sending or uploading to server with multipart in react native

multipartform-data

multipart

react-native