多个文档选择器未在 react native 中的服务器上上传

Multiple Document picker not uploading on server in react native

提问人:umair ali 提问时间:10/30/2023 更新时间:10/30/2023 访问量:51

问:

我正在使用react native文档选择器并选择要上传到服务器上的多个文档。我也在使用formData上传文件。但是在后端,我的文件没有上传。我从我这边打得最好。如果有人知道解决方案,请指导。

const selectMyFiles = async () => {
    try {
      const results = await DocumentPicker.pick({
        copyTo: 'documentDirectory',
        allowMultiSelection: true,
        type: [
          DocumentPicker.types.pdf,
          DocumentPicker.types.docx,
          DocumentPicker.types.images,
        ],
      });
      let documents = [];
      results.forEach(result => {
        const {name, uri, size, type, fileCopyUri} = result;
        const maxFileSize = size / 1048576;
        if (maxFileSize <= 2) {
          setSelectedFiles([
            ...selectedFiles,
            {name, uri, size, type, fileCopyUri},
          ]);
          documents.push({
            uri: uri,
            type: type,
            size: size,
            name: name,
            fileCopyUri: fileCopyUri,
          });
          setModalValue(false);
        } else {
          Alert.alert('Max File', 'Maximum file size is 2MB', [
            {
              text: 'Change',
              onPress: () => selectOneFile(),
              style: 'cancel',
            },
          ]);

          return false;
        }
      });

      setFilesInAction(documents);
 
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        alert('Canceled from single doc picker');
      } else {
        //For Unknown Error
        alert('Unknown Error: ' + err);
        throw err;
      }
    }
  };


const onPressSubmit = () => {
    const formData = new FormData();
    formData.append('remarks', inputContactState);
    formData.append('category_id', categoryId);
    formData.append('documents[]', filesInAction);
    dispatch(contactComplaintAction(formData));
  };

android react-native react-redux 文档 表单数据

评论

0赞 Shivo'ham 11/6/2023
您的问题解决了吗?
1赞 umair ali 11/14/2023
我通过使用 base 64 发送文件解决了这个问题
0赞 Shivo'ham 11/15/2023
Base64不是表单数据API中的正确技巧

答:

1赞 Shivo'ham 10/30/2023 #1

我认为您的请求正文有问题

试试这个身体

const formData = new FormData();
  formData.append('remarks', inputContactState);
  formData.append('category_id', categoryId);
  filesInAction.forEach((file: any) => {
    formData.append('documents[]', {
      name: file?.fileName,
      size: file?.fileSize,
      type: file?.type,
      uri: file?.uri
    });
  });

Formdata API示例

const uploadImage = async () => {
   formData.append('remarks', inputContactState);
      formData.append('category_id', categoryId);
      filesInAction.forEach((file: any) => {
        formData.append('documents[]', {
          name: file?.fileName,
          size: file?.fileSize,
          type: file?.type,
          uri: file?.uri
        });
      });
    let res = await fetch(
      `${baseUrl}/fame/saveImage`,
      {
        method: 'post',
        body: formData,
        headers: {
          Authorization: `Bearer ${token}`,
          'Content-Type': 'multipart/form-data',
        },
      }
    );
    let responseJson = await res.json();
    if (responseJson.status == 1) {
      alert('Upload Successful');
    }
};