Как правильно загружать изображения и видео, выбранные с помощью встроенного средства выбора изображений для кадрирования, на сервер?

Question

Проблема:

Я использовал собственное средство выбора изображений для кадрирования для выбора изображений и видео. Затем я отправил их на бэкэнд, используя этот код в качестве моего вызова API.

var formData = new FormData();
  let item;
  console.log(filesArray, 'giiii>>>>>.');
  if (filesArray.length !== 0) {
    filesArray.map((file, index) => {
      item = {
        uri: `data: ${file.mime};base64,${file.data}`,
        type: file.mime,
        size: file.size,
        lastModified: file.modificationDate,
      };
      formData.append(`mediaItems`, item);
    });
  }

  console.log(formData, 'formData');
  return (dispatch) => {
    dispatch(uploadMutimedia(questionId));
    return axios
      .post(
        `${endPoints.REST_API}/${culture}/${endPoints.UPLOAD_MULTIMEDIA}?candidateAnswerId=${questionId}`,
        formData,
        {
          headers: {
            'Content-Type': 'multipart/form-data',
            'Access-Control-Allow-Origin': '*',
          },
        },
      )
      .then((data) => {
        console.log(data);
        dispatch(uploadMutimediaSuccess(data.data));
      })
      .catch((err) => {
        dispatch(uploadMutimediaFailed(err));
      });
  };

Вот как выглядит мой код выбора изображений.

const showControls = (state, setState) => {
  state.showControls
    ? setState({...state, showControls: false})
    : setState({...state, showControls: true});
};

const handlePlayPause = (state, setState) => {
  if (state.play) {
    setState({...state, play: false, showControls: true});
    return;
  }

  setState({...state, play: true});
  setTimeout(() => setState((s) => ({...s, showControls: false})), 2000);
};

function onLoadEnd(data, state, setState) {
  setState({
    ...state,
    duration: data.duration,
    currentTime: data.currentTime,
  });
}

function onProgress(data, state, setState) {
  setState({
    ...state,
    currentTime: data.currentTime,
  });
}

const onEnd = (state, setState, player) => {
  setState({
    ...state,
    showControls: false,
    play: false,
    currentTime: 0,
    duration: 0,
  });
  player.current.seek(0);
};

const openPicker = async (type, setFileObject, setImages, images) => {
  if (setImages && images) {
    setImages(null);
  }
  if (type === 4) {
    
    ImagePicker.openPicker({
      mediaType: 'photo',
      multiple: true,
      includeBase64: true,
    })
      .then((imagesSet) => {
        setFileObject(imagesSet);
      })
      .catch((err) => {
        console.log(err);
      });
  }

  if (type === 5) {
    ImagePicker.openPicker({
      mediaType: 'video',
    })
      .then((item) => {
        RNFetchBlob.fs.readFile(item.path, 'base64').then((data) => {
          item['data'] = data;
          let arr = [];
          arr.push(item);
          setFileObject(arr);
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

const DocumentUpload = (props) => {
  const {type, fileObject, setfilename} = props;
  const [state, setState] = useState({
    fullscreen: false,
    play: false,
    currentTime: 0,
    duration: 0,
    showControls: true,
  });

  const [images, setImages] = useState(null);

  useEffect(() => {
    console.log('fileobject', fileObject);
    if (fileObject && type === 4) {
      let imageArr = [];
      let imageItem;
      fileObject.map((item, index) => {
        imageItem = {
          ilustration: item.path,
        };
        imageArr.push(imageItem);
      });
      setImages(imageArr);
    }
  }, [fileObject, type]);

  console.log(fileObject);

  const player = createRef();
  return (
    <View>
      {type === 5 && fileObject && (
        <View style={styles.videoContainer}>
          <View style={styles.videoInnerContainer}>
            <TouchableWithoutFeedback
              onPress={() => showControls(state, setState)}>
              <View style={{flex: 1}}>
                <Video
                  source={{
                    uri: fileObject[0].path,
                  }}
                  controls={false}
                  style={styles.backgroundVideo}
                  ref={player}
                  resizeMode={'contain'}
                  paused={!state.play}
                  onEnd={() => onEnd(state, setState, player)}
                  onLoad={(data) => onLoadEnd(data, state, setState)}
                  onProgress={(data) => onProgress(data, state, setState)}
                />
                {state.showControls && (
                  <View style={styles.controlsOverlay}>
                    <PlayerControls
                      play={state.play}
                      playVideo={handlePlayPause}
                      state={state}
                      setState={setState}
                      pauseVideo={handlePlayPause}
                    />
                  </View>
                )}
              </View>
            </TouchableWithoutFeedback>
          </View>
        </View>
      )}
      {type === 4 && fileObject && images && (
        <View style={{alignItems: 'center', height: '70%'}}>
          <ImageCarousel images={images} uploadedImages={true} />
        </View>
      )}
      {type === 4 && fileObject && !images && (
        <View style={styles.loadderContainerWI}>
          <Image source={spinner} resizeMode={'center'} />
        </View>
      )}
      {!fileObject ? (
        <>
          <TouchableOpacity onPress={() => openPicker(type, setfilename)}>
            <Image
              source={require('_assets/img/cmerap.png')}
              resizeMode="center"
              style={styles.camPImageWV}
            />
          </TouchableOpacity>
          <AppText styles={styles.camPText}>
            {strings('assetsment.capture')}
          </AppText>
        </>
      ) : (
        <>
          {type === 4 && images && (
            <View
              style={[
                styles.videoBottomText,
                images ? {marginTop: '9%'} : null,
              ]}>
              <TouchableOpacity
                onPress={() =>
                  openPicker(type, setfilename, setImages, images)
                }>
                <View style={styles.updateAgainContainer}>
                  <Icon name="reload1" style={styles.reloadIcon} />
                  <AppText styles={styles.reloadText}>
                    {strings('assetsment.reload')}
                  </AppText>
                </View>
              </TouchableOpacity>
            </View>
          )}
          {type === 5 && (
            <View style={styles.videoBottomText}>
              <TouchableOpacity
                onPress={() =>
                  openPicker(type, setfilename, setImages, images)
                }>
                <View style={styles.updateAgainContainer}>
                  <Icon name="reload1" style={styles.reloadIcon} />
                  <AppText styles={styles.reloadText}>
                    {strings('assetsment.reload')}
                  </AppText>
                </View>
              </TouchableOpacity>
            </View>
          )}
        </>
      )}
    </View>
  );
};

export default DocumentUpload;

Я использовал тот же API позвонить с реакцией в моем веб-приложении. Это сработало. Там я просто отправил массив файлов, выбранный средством выбора файлов, но здесь он неправильно загрузил файл на сервер. Может ли кто-нибудь помочь мне найти решение для правильной загрузки этих выбранных файлов на сервер? Я много пытался найти решение, но у меня не получалось. Если кто-то может мне помочь, это будет много значить для меня. Спасибо