如何在 React Native 中将图像上传到服务器。使用多部分

Question

我是本机反应的新手。我创建了一个表格。我想将图像上传到服务器。 在控制台中，我得到了这样的 formData。意味着我正在获取图像、名称和对象中的所有内容。

  Array [
      "upload_pancard",
      Object {
        "name": "pancardImage",
        "type": "image/jpg",
        "uri": Object {
          "singleFilePAN": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FAwesomeProject-caa28295-07ae-40d0-8b07-905883f99373/Camera/727a66c1-5b3f-4c81-a27a-b05889c76e3f.jpg",
        },
      },
    ],

但我想要这样。在上传 pancard

  Array [
      "upload_pancard":{
        "name": "pancardImage",
        "type": "image/jpg",
        "uri": Object {
          "singleFilePAN": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FAwesomeProject-caa28295-07ae-40d0-8b07-905883f99373/Camera/727a66c1-5b3f-4c81-a27a-b05889c76e3f.jpg",
      },
    ],

这是我的代码

export default function Add(props) {

  const [singleFilePAN, setSingleFilePAN] = useState('');
  const [singleFileADH, setSingleFileADH] = useState('');
  const [singleFileADH1, setSingleFileADH1] = useState('');
  const [singleFileSIGN, setSingleFileSIGN] = useState('');

 const [LocalImage, setLocalImage] = useState([]);
 const [multipleUrl, setMultipleUrl] = useState([]);

  const [PanImage, setPanImage] = useState([]);
  const [AdharI, setAdharI] = useState([]);
  const [AdharII , setAdharII] = useState([]);

  const [imageArray, setImageArray] = useState({
    PAN: null,
    GST: null,
    ADH: null,
    ADH1: null,
  });
  

const validateInputs = () => {


  const formData = new FormData();


formData.append('phpid',phpid);
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',
    type: 'image/jpg'
  }
);
formData.append('upload_aadhar', 
    {
        uri: singleFileADH,
        name: 'upload_aadhar',
        type: 'image/jpg'
    }
);
formData.append('upload_aadhar_second', 
    {
        uri: singleFileADH1,
        name: 'upload_aadhar_second',
        type: 'image/jpg'
    }
);

  fetch('https://abc.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");
  });
});
}

  const takePicture = async (type) => {
    if (camera) {
      //const data = await camera.takePictureAsync(null);

      const data = await camera.takePictureAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        //base64: true,
      });

      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,
     // base64: true,
    });

    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 });
    //  setSingleFile({ singleFile: result});
     setSingleFilePAN({ singleFilePAN: newImageArr.PAN});
     setSingleFileADH({ singleFileADH: newImageArr.ADH});
     setSingleFileADH1({ singleFileADH1: newImageArr.ADH1});
    }
  };

请忽略这一点。我是本机反应的新手。我创建了一个表格。我想将图像上传到服务器。 在控制台中，我得到了这样的 formData。意味着我在对象中获取图像、名称和所有这些东西。我是本机反应的新手。我创建了一个表格。我想将图像上传到服务器。 在控制台中，我得到了这样的 formData。意味着我正在获取图像、名称和对象中的所有内容。