React Native将XML字符串写入.xml文件并上传至服务器失败如何解决

修复方案 #

你的代码存在3个核心错误，依次修复即可正常上传：

• 异步逻辑顺序错误：RNFS.writeFile是异步操作，你没有等待文件写入完成就执行上传逻辑，此时文件还未生成，自然无法读取到有效内容
• FormData传递格式错误：axios上传multipart/form-data类型数据时，需要直接把FormData实例作为data参数的值，不能将其嵌套在普通对象中
• URI格式与MIME类型错误：React Native本地文件路径需要加file://前缀才能被FormData识别，同时XML的正确MIME类型是application/xml

修正后代码如下：

import { Platform } from 'react-native'; // 未引入Platform需先添加该行

const getToken = async () => {
    updateState({isLoading: true}); // 原逻辑有误，加载状态应先设为true
    try {
      const xml = await onJsonToXmal();
      // 创建文件路径
      const path = RNFS.DocumentDirectoryPath + '/test.xml';
      // 等待文件写入完成再执行后续操作
      await RNFS.writeFile(path, xml, 'utf8');
      const checksum = md5(xml);

      const formData = new FormData();
      formData.append('file', {
        // 适配不同平台的路径格式
        uri: Platform.OS === 'ios' ? path : `file://${path}`,
        type: 'application/xml',
        name: 'demo.xml',
      });
      // 所有请求参数都需append到FormData实例中
      formData.append('checksum', checksum);

      const res = await axios({
        method: 'post',
        url: 'some url',
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: 'Bearer some token',
        },
        // 直接传入FormData实例，不要嵌套对象
        data: formData,
      });
      console.log(res.data);
    } catch (error) {
      console.log(error);
      Alert.alert(`${error}`);
    } finally {
      updateState({isLoading: false});
    }
};

const onJsonToXmal = () => {
    const data = dummyData; //dataForXml
    const res = toXML(data);
    return res;
};

内容的提问来源于stack exchange，提问作者Kanwarjeet Singh