React-native: React Native 0.62.* [TypeError: Network request failed] 文件上传

创建于 2020-04-06  ·  263评论  ·  资料来源: facebook/react-native

请提供所有要求的信息。 不遵循此格式的问题可能会停滞不前。

描述

从 0.61.4 升级到 0.62.0 后,应用程序将不再从 Android 上传文件(所有其他请求都工作正常)

反应原生版本:

0.62.0

重现步骤

  1. 通过 CLI 安装新的 ReactNative 应用程序
  2. 将文件上传到模拟器
  3. 尝试使用fetch上传文件
import Picker from "react-native-image-picker"
import {request, PERMISSIONS, RESULTS} from 'react-native-permissions';

class App extends React.Component {

  async componentDidMount() {

    try {
      await request(PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE)
      await Picker.launchImageLibrary({noData: true}, async (file) => {
        try {
           const body = new FormData()
           body.append("file", { type: file.type, size: file.fileSize, uri: `file://${file.path}`, name: file.fileName })
           const headers = { "content-type": "multipart/form-data", "accept": "application/json" }

          const req = await fetch("ANY_SERVER/upload/image", {
            method: "POST",
            headers,
            body
          })
          console.log(req.status)
        }  catch (e) {
          console.log(e)
        }
      })
    } catch (e) {
      console.log(e)
    }
  }

  render(){
    return <View/>
  }
}

预期成绩

请求应到达服务器以上传文件

小吃、代码示例、屏幕截图或存储库链接:

https://snack.expo.io/01W!bybf_
[Mon Apr 06 2020 21:29:18.704] LOG [TypeError: Network request failed]

Flipper React Native Team Attention Android

最有用的评论

谁还在为这个问题苦苦挣扎。 这是因为 Flipper 网络插件而发生的。
我禁用了它,一切正常。

我完成这项工作的解决方法是注释掉第 43 行

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="8">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

在这个文件中android/app/src/debug/java/com/**/ReactNativeFlipper.java

所有263条评论

这里同样的问题!

同样的问题 !! 从过去的两天开始,我一直被这个问题困扰! 几乎搜遍了所有东西..

您需要将此uesCleartextTraffic="true"添加到目录 _android/app/src/main/AndroidManifest.xml_ 中的AndroidManifest.xml文件中

    <application
      ...
      android:usesCleartextTraffic="true">

根据文档

当该属性设置为“false”时,平台组件(例如,HTTP 和 FTP 堆栈、DownloadManager 和 MediaPlayer)将拒绝应用程序使用明文流量的请求。 强烈建议第三方库也遵守此设置。 避免明文流量的关键原因是缺乏机密性、真实性和防篡改保护; 网络攻击者可以窃听传输的数据并在不被发现的情况下对其进行修改。

您需要将此uesCleartextTraffic ="true" 添加到目录 android/app/src/main 中的 AndroidManifest,xml 文件中

    <application
      ...
      android:usesCleartextTraffic="true">

根据文档

当该属性设置为“false”时,平台组件(例如,HTTP 和 FTP 堆栈、DownloadManager 和 MediaPlayer)将拒绝应用程序使用明文流量的请求。 强烈建议第三方库也遵守此设置。 避免明文流量的关键原因是缺乏机密性、真实性和防篡改保护; 网络攻击者可以窃听传输的数据并在不被发现的情况下对其进行修改。

我已经试过了。 这在您向 http 服务器发出请求时使用,但我的服务器在 https 上运行。 在升级到 0.62 之前它运行良好。
出了点问题。

所有其他请求都运行良好。 只有文件上传不再起作用。

所有其他请求都运行良好。 只有文件上传不再起作用。

当我尝试升级到 0.62 时,我遇到了太多问题,即使我创建了一个新应用程序并将我的代码移入其中。 我回滚到 0.61.5 直到它稳定:/

我面临同样的问题,因为 RN 0.62.0 和 0.62.1 抛出此错误: Network request filed
除图片帖子外,所有请求均有效

我搬回了 0.61.5 :( 目前没有其他选择。如果有人在降级到 0.61.5 时需要帮助,请参阅 react-native-upgrade-helper。

这里也一样!

我遇到了同样的问题,它发生在 Android 中,但在 IOS 中运行良好。
我猜这个问题是关于 Flipper Network 的。

有一段时间,我评论了
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

在这个文件中
/android/app/src/main/java/com/{your_project}/MainApplication.java

这个问题也发生在我这边,猜猜它只在调试模式下发生。 尝试在 internalRelease 中构建,它工作正常。 我猜这是因为调试模式下的自动/快速重新加载应用了一些似乎与此问题相关的鳍状肢通信。

这里的另一个问题是android logcat中没有错误。我也花了几天时间研究如何解决这个问题仍然没有运气。

谁还在为这个问题苦苦挣扎。 这是因为 Flipper 网络插件而发生的。
我禁用了它,一切正常。

我完成这项工作的解决方法是注释掉第 43 行

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="8">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

在这个文件中android/app/src/debug/java/com/**/ReactNativeFlipper.java

感谢@abumostafa 的问题。 这是否发生在开箱即用的新 React Native 模板中? 如果是这样,应该查看它,否则请随意关闭它。

:警告:缺少可重现的示例
:信息来源:看起来您的问题缺少可重现的示例。 请提供Snack或存储库,以最小、完整和可重现的方式展示您报告的问题。
:警告:使用旧版本
:信息来源:看起来您使用的是旧版本的 React Native。 请升级到最新版本,并验证问题是否仍然存在。 如果没有,请告诉我们,以便我们关闭此问题。 这有助于我们确保我们正在查看当前版本中仍然存在的问题。

感谢@abumostafa 的问题。 这是否发生在开箱即用的新 React Native 模板中? 如果是这样,应该查看它,否则请随意关闭它。

这仍然发生在最新的 React Native 模板 0.62.1

感谢@abumostafa 的问题。 这是否发生在开箱即用的新 React Native 模板中? 如果是这样,应该查看它,否则请随意关闭它。

这仍然出现在最新的 React Native 模板 0.62.1

@safaiyeh
我可以确认。 它仍在最新的新鲜反应原生模板 0.62.1 中发生

谁还在为这个问题苦苦挣扎。 这是因为 Flipper 网络插件而发生的。
我禁用了它,一切正常。

我完成这项工作的解决方法是注释掉第 43 行

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

在这个文件中android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

仍在 0.62.2 中发生,这暂时修复了 Android 上的问题

@abumostafa

*尝试这个 *

尝试实现“rn-fetch-blob”

````
从“rn-fetch-blob”导入 RNFetchBlob;

RNFetchBlob.fetch('POST',, {
接受:'应用程序/json',
“内容类型”:“多部分/表单数据”,},[
{名称:'profileimage',文件名:this.state.filePath.fileName,数据:RNFetchBlob.wrap(this.state.filePath.uri)},
{名称:'uid',数据:uidy},
{名称:'dob',数据:this.state.fDOB},
{名称:'电话号码',数据:this.state.pnumber},
{名称:'地址',数据:this.state.address},
{名称:'性别',数据:this.state.isgender},
{名称:'用户名',数据:this.state.fulname}
// 自定义内容类型
]).then((res) => {
控制台.log(res)
ResponseHelper.success('更新');
this.setState({isstarting:false})
})
.catch((错误) => {
this.setState({isstarting:false})
ResponseHelper.success('服务器问题请重试');
console.log('err', 错误);
})
````

这将解决您的问题

RNFetchBlob.wrap

谢谢。 我有个问题。 此函数是否RNFetchBlob.wrap将文件转换为base64

谁还在为这个问题苦苦挣扎。 这是因为 Flipper 网络插件而发生的。
我禁用了它,一切正常。

我完成这项工作的解决方法是注释掉第 43 行

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

在这个文件中android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

谢谢@abumostafa这个解决方案节省了我很多时间。 我已经在文件上传错误上花了很多时间,然后我遇到了你的问题。 顺便说一句,您知道问题是否已解决吗?

我联系了 Flipper 团队,这方面的工作将在此处跟踪: https ://github.com/facebook/flipper/issues/993

我尝试了@abumostafa和@alfianwahid 提出的两种解决方案; 我试图降级到 0.61.5; 我试图用 fetch 来实现(我正在使用 axios); 没有工作。 我正在使用版本 0.62.1

我尝试了@abumostafa和@alfianwahid 提出的两种解决方案; 我试图降级到 0.61.5; 我试图用 fetch 来实现(我正在使用 axios); 没有工作。 我正在使用版本 0.62.1

您是否尝试在更改后重建应用程序?

@abumostafa我不知道我是否做对了。 但是我删除了node_modules文件夹yarn.lock ,运行命令./gradlew clean./gradlew cleanBuildCache并再次运行npx react-native run-android

我目前在 RN 0.61.4 和 axios 0.19.2 上遇到了同样的问题。 还尝试评论initializeFlipper(this); cleanBuildCache并仍然得到Network Error

打开 android 文件夹并搜索 ReactNativeFlipper.java 文件和
注释第 43 行
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

就我而言,我的项目中没有该文件

就我而言,我的项目中没有该文件
你有android文件夹吗
如果您在 app 文件夹中进行搜索

RNFetchBlob.wrap

谢谢。 我有个问题。 此函数是否RNFetchBlob.wrap将文件转换为base64

https://github.com/joltup/rn-fetch-blob/wiki/Fetch-API#class -rnfetchblob

同样在这里,例如尝试fetch("https://www.mocky.io/v2/5185415ba171ea3a00704eed")引发TypeError: Network request failed
它仅在 Android 中发生,无论是在调试还是发布时,无论是远程调试还是不远程调试。
添加android:usesCleartextTraffic="true"没有帮助(但它仍然适用于非 SSL 请求)。
使用 RN 0.62.2。

编辑:获取https://jsonplaceholder.typicode.com/todos/1有效! 有些网站怎么能工作而其他网站不能?!

更新,在做了一些测试后,我们得出结论,这是由于 SSL 证书失败。 我们不知道这些有什么问题,但在启用“SSL 证书验证”选项的 Postman 中也会出现此问题。 可能是证书颁发机构不在电话列表中吗?

刚刚花了最后一天与这个问题作斗争。 用“file://”为我的绝对路径添加前缀,这样你就以三个 / 结尾,为我解决了问题。

一个示例路径:

file:///data/data/com.fake/cache/file-name.jpeg

我的代码示例:

fetch(url, {
  method: "POST",
  body: {
    uri: 'file://' + file.absolutePath,
    type: file.type,
    name: file.name,
  },
  headers: headers,
  credentials: "include",
})

我正在使用 react-native@^0.62.2

修复发布了吗? 我们如何更新?

仍然在 0.62.2 中获得它,是否有任何更新?

谁还在为这个问题苦苦挣扎。 这是因为 Flipper 网络插件而发生的。
我禁用了它,一切正常。
我完成这项工作的解决方法是注释掉第 43 行

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="10">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

在这个文件中android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

仍在 0.62.2 中发生,这暂时修复了 Android 上的问题

现在确实可以解决它。

谁还在为这个问题苦苦挣扎。 这是因为 Flipper 网络插件而发生的。
我禁用了它,一切正常。

我完成这项工作的解决方法是注释掉第 43 行

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

在这个文件中android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

这让我很快乐! 适用于 RN 0.62.0。 谢谢!

Flipper 已发布更新,请查看最新评论https://github.com/facebook/flipper/issues/993#issuecomment -619823916 react-native 会发布更新以反映此修复吗?

尝试fetch("https://www.mocky.io/v2/5185415ba171ea3a00704eed")时,即使它在 Chrome/Firefox/Safari 中有效,仍然会使用新的 Flipper 0.39.0 获得Network request failed

@antoinerousseau您可能想在那里说...我还没有测试过。

@aprilmintacpineda我在https://github.com/facebook/react-native/issues/26939上发布,似乎更相关,我不确定它是否与 Flipper 相关?

通过在这个文件中升级 Flipper 解决了这个问题

/yourproject/android/gradle.properties第 28 行
gradle {.line-numbers} 25 android.enableJetifier=true 26 27 # Version of flipper SDK to use with React Native 28 FLIPPER_VERSION=0.41.0 //upgrade to latest flipper
看 :
https://github.com/facebook/flipper/issues/993#issuecomment -619823916

我在 react 0.61.4 遇到了同样的问题

谢谢@alfianwahid
解决了我的问题。

我们可以关闭这张票吗?

也帮助了我💪

@abumostafa ,谢谢兄弟,这节省了我 48 小时的搜索时间

我们可以关闭这张票吗?

我糊涂了。 如果您只找到了解决方法并且问题未解决,为什么要关闭此问题?

大家好,我也尝试过使用axiosfetch但这些都不起作用,我也尝试评论 Flipper 线并对其进行升级,但它也没有效果。 如果你们仍然有这个问题,最好尝试使用XMLHttpRequest进行 POST 请求,它对我有用。
希望能帮助到你。

这个问题也发生在我这边,猜猜它只在调试模式下发生。 尝试在 internalRelease 中构建,它工作正常。 我猜这是因为调试模式下的自动/快速重新加载应用了一些似乎与此问题相关的鳍状肢通信。

这里的另一个问题是android logcat中没有错误。我也花了几天时间研究如何解决这个问题仍然没有运气。

你是怎么解决的? @trgairnarra

我面临同样的问题,因为 RN 0.62.0 和 0.62.1 抛出此错误: Network request filed
除图片帖子外,所有请求均有效

同样在这里。 你是怎么解决的? 我的应用程序在发布模式下运行良好,但在构建模式下不正常

谁还在为这个问题苦苦挣扎。 这是因为 Flipper 网络插件而发生的。
我禁用了它,一切正常。

我完成这项工作的解决方法是注释掉第 43 行

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

在这个文件中android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

你拯救了我的一天。 非常感谢 :) 但是对于未来的构建这样做是否安全?

嗨,我仍然在 62.2 中遇到问题。
尝试的解决方案

  1. android:usesCleartextTraffic="true" => 即使我所有其他 API 都在工作,我也有 HTTP。
  2. 注释掉第 43 行
  3. "file://", => 没有问题,即使没有添加图像,我们只是添加 json formdata 仍然得到同样的错误。

嗨,我仍然在 62.2 中遇到问题。
尝试的解决方案

  1. android:usesCleartextTraffic="true" => 即使我所有其他 API 都在工作,我也有 HTTP。
  2. 注释掉第 43 行
  3. "file://", => 没有问题,即使没有添加图像,我们只是添加 json formdata 仍然得到同样的错误。

@jamisonrachford尝试使用XMLHttpRequest完成您的请求

通过在这个文件中升级 Flipper 解决了这个问题

/yourproject/android/gradle.properties第 28 行

25  android.enableJetifier=true  
26  
27  # Version of flipper SDK to use with React Native 
28  FLIPPER_VERSION=0.41.0  //upgrade to latest flipper

看 :
facebook/flipper#993(评论)

手动制作 FLIPPER_VERSION=0.41.0 而不是使用默认的 FLIPPER_VERSION=0.33.1 和 RN 0.62.2 会导致构建失败(附加图像)。 我错过了升级脚蹼版本的步骤吗?
gradle issues

我正在使用世博会。 我该如何解决这个问题?

通过在这个文件中升级 Flipper 解决了这个问题

/yourproject/android/gradle.properties第 28 行

25  android.enableJetifier=true  
26  
27  # Version of flipper SDK to use with React Native 
28  FLIPPER_VERSION=0.41.0  //upgrade to latest flipper

看 :
facebook/flipper#993(评论)

太感谢了!

通过在这个文件中升级 Flipper 解决了这个问题

/yourproject/android/gradle.properties第 28 行

25  android.enableJetifier=true  
26  
27  # Version of flipper SDK to use with React Native 
28  FLIPPER_VERSION=0.41.0  //upgrade to latest flipper

看 :
facebook/flipper#993(评论)
谢谢!
这个问题困扰了我两天

我正在使用expo客户端,必须有解决方案吗? 我正在寻找几天但无济于事,谁能帮助我如何在世博会上实现这一目标?

@Hiti3我也在使用 expo。 我也在寻找解决方案。 我现在正在做的是发送一个base64字符串(没有formData)并在服务器端对其进行解码:

世博会
`import * as ImagePicker from 'expo-image-picker';

// 图像选择器
导出默认异步 () => {
常量权限 = 等待 ImagePicker.requestCameraRollPermissionsAsync();
if (permission.granted === 'false') 返回'拒绝';
常量选项 = { 允许编辑:真,base64:真 };
常量结果 = ImagePicker.launchImageLibraryAsync(options);
返回结果;
};
`

服务器端
`
常量尖锐 = 要求('尖锐');
export.uploadImage = async (req, res, next) => {
常量 { 图像 } = req.body;
常量 {
类型:图像类型,
名称:图像名称,
base64:imageBase64,
路径:图像路径,
调整大小,
} = 图像;

常量 base64Data = imageBase64.replace( data:image/${imageType};base64 , '');

var img = new Buffer(base64Data, 'base64');
常量路径 = __dirname + ./../../public/${imagePath}/${imageName} ;

如果(调整大小){
尝试 {
等待尖锐(img)
.resize(500, 500)
.toFormat('jpeg')
.jpeg({质量:90})
.toFile(路径);
} 捕捉(错误){
console.log('写错误', err);
}
}
如果(!调整大小){
尝试 {
await sharp(img).toFormat('jpeg').jpeg({ quality: 90 }).toFile(path);
} 捕捉(错误){
console.log('写错误', err);
}
}
req.image = { imageType, imageName, imagePath };
下一个();
};
`

帮助它帮助。 如果您有任何问题,请给我留言。

感谢您提供的解决方案,这是经过测试的,我只想
在我跳船并失去一天之前再次确定。 而你是
如果我理解正确,上传视频或图片?

2020 年 5 月 19 日星期二 21:44 Gustavo Leite Silvano, notifications @github.com
写道:

@Hiti3 https://github.com/Hiti3我也在使用 expo。 我也在
寻找解决方案。 我现在正在做的是发送一个base64字符串(没有
formData) 并在服务器端对其进行解码:

世博会
`import * as ImagePicker from 'expo-image-picker';

// 图像选择器
导出默认异步 () => {
常量权限 = 等待 ImagePicker.requestCameraRollPermissionsAsync();
if (permission.granted === 'false') 返回'拒绝';
常量选项 = { 允许编辑:真,base64:真 };
常量结果 = ImagePicker.launchImageLibraryAsync(options);
返回结果;
};
`

服务器端
`
常量尖锐 = 要求('尖锐');
export.uploadImage = async (req, res, next) => {
常量 { 图像 } = req.body;
常量 {
类型:图像类型,
名称:图像名称,
base64:imageBase64,
路径:图像路径,
调整大小,
} = 图像;

常量 base64Data = imageBase64.replace(data:image/${imageType};base64,
'');

var img = new Buffer(base64Data, 'base64');
常量路径 = __dirname + ./../../public/${imagePath}/${imageName};

如果(调整大小){
尝试 {
等待尖锐(img)
.resize(500, 500)
.toFormat('jpeg')
.jpeg({质量:90})
.toFile(路径);
} 捕捉(错误){
console.log('写错误', err);
}
}
如果(!调整大小){
尝试 {
await sharp(img).toFormat('jpeg').jpeg({ quality: 90 }).toFile(path);
} 捕捉(错误){
console.log('写错误', err);
}
}
req.image = { imageType, imageName, imagePath };
下一个();
};
`

帮助它帮助。 如果您有任何问题,请给我留言。


你收到这个是因为你被提到了。
直接回复此邮件,在 GitHub 上查看
https://github.com/facebook/react-native/issues/28551#issuecomment-631041471
或退订
https://github.com/notifications/unsubscribe-auth/ACGFH2MSYJ2J5YDRASXISOTRSLOQFANCNFSM4MCRHIRA
.

0.41.0

太感谢了。

通过在这个文件中升级 Flipper 解决了这个问题
/yourproject/android/gradle.properties第 28 行

25  android.enableJetifier=true  
26  
27  # Version of flipper SDK to use with React Native 
28  FLIPPER_VERSION=0.41.0  //upgrade to latest flipper

看 :
facebook/flipper#993(评论)

太感谢了!

@Hiti3只是图像。 但我认为你也可以上传视频。

谢谢@alfianwahid
但我用
FLIPPER_VERSION=0.44.0

我曾经遇到过同样的问题,我尝试了所有事情并坚持了 4-5 天,然后我使用 RN-FETCH-BLOB 包它确实解决了发送文件的问题。 使用它你永远不会后悔

应用上述两个修复后,我仍然收到网络请求失败。 在我的情况下,文件在服务器上得到更新,但它给出了错误。

可能是您发送数据的方式的问题

可能是您发送数据的方式的问题

我正在调查它。 但是,如果发送方法不正确,那么为什么数据会在服务器上更新。

我已经尝试了所有解决方案,但在 android 上没有任何成功。 我正在使用 0.62.2
Screen Shot 2020-05-31 at 6 40 53 PM

@tamangsuresh嘿伙计,你找到解决方法了吗?

@Brianop没有人

感谢说升级Flipper的,我解决了

嘿,有人解决了这个问题吗?,我也面临同样的问题。

嘿,有人解决了这个问题吗?,我也面临着同样的问题。
You need to upgrade flipper to the latest

@liyuewen我在 RN 项目中升级了脚蹼和脚蹼。 但没有任何成功。

@liyuewen 我在RN项目中也有鳍状肢的升级和鳍状肢。但是没有任何成功。

After the upgrade, you need to clear the Android cache

@liyuewen我也这样做了。 但没有任何运气。

通过在这个文件中升级 Flipper 解决了这个问题

/yourproject/android/gradle.properties第 28 行

25  android.enableJetifier=true  
26  
27  # Version of flipper SDK to use with React Native 
28  FLIPPER_VERSION=0.41.0  //upgrade to latest flipper

看 :
facebook/flipper#993(评论)
在我的项目中,此位置 D:myProjectnode_modulesreact-nativetemplateandroidgradle.properties 上提供了翻转器版本。 我已经更新了这个位置的 gradle 中的鳍状肢和位于 /myProject/android/gradle.properties 的其他 gradle.properties。 数据也会在服务器上更新,我已经在 Postman 中对其进行了测试,在 Postman 中也可以正常工作。 我还评论了@abumostafa告诉的代码

@liyuewen 我也做到了。但没有任何运气。

My version is "react native": "^ 0.62.2", which is successful in the future

更新Flipper到0.45,解决问题

我没有在任何地方使用 Flipper,仍然遇到同样的问题 :(

我没有在任何地方使用 Flipper,仍然遇到同样的问题 :(

同样在这里,使用 Expo.. 对于这么多人来说,这不应该是一个问题,尤其是在使用托管工作区时,该功能被模棱两可地呈现为工作功能。

任何人都有关于这个问题的更新。 我试过升级鳍状肢,在 mainactivity 中注释掉鳍状肢。 在android中仍然有这个问题。
返回 [TypeError:网络请求失败]。
但是相同的代码在 iOS 中运行良好

任何人都有关于这个问题的更新。 我试过升级鳍状肢,在 mainactivity 中注释掉鳍状肢。 在android中仍然有这个问题。
返回 [TypeError:网络请求失败]。
但是相同的代码在 iOS 中运行良好

initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

在 MainApplication.java 中删除这一行是可行的。 调试版本中仍然存在问题。 但它适用于发布版本。

任何人都有关于这个问题的更新。 我试过升级鳍状肢,在 mainactivity 中注释掉鳍状肢。 在android中仍然有这个问题。
返回 [TypeError:网络请求失败]。
但是相同的代码在 iOS 中运行良好

initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

在 MainApplication.java 中删除这一行是可行的。 调试版本中仍然存在问题。 但它适用于发布版本。

谢谢,我从未尝试在发布版本中进行测试。 我今天会试试。

我有反应原生 v59。 那么,不使用 Flipper 的人能做什么呢? 有更新吗?

这是我想从我的应用程序中提取的所有相关数据。 我在iOS模拟器上遇到了同样的问题。

RN 0.62.2,Flipper 0.46.0,在弹出的 Expo 应用程序上。

  // Turn the recording into a multipart form request with recording = the contents of our file.
  let fileUri = recording.getURI();
  if (!fileUri) {
    throw new Error('fileUri is null, it should always be initialized before reaching this point.');
  }

  let body = new FormData();
  body.append('recording', {
    uri: fileUri,
    name: 'voice-command.mp4',
    type: 'audio/mp4'
  });

  // Kick off the transcription job.
  var response;
  try {
    response = await fetch(
      'http://localhost:5000/api/v0/commands/transcription/start',
      {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
        },
        body,
      },
    );
  } catch (error) {
    console.error(error);
    throw error;
  }

TypeError:网络请求失败
http://localhost :8081/index.bundle?platform=ios&dev=true&minify= false:32085 :31
dispatchEvent@http :// localhost:8081/index.bundle?platform=ios&dev=true&minify=false :34645:31
setReadyState@http :// localhost:8081/index.bundle?platform=ios&dev=true&minify=false :33729:33
__didCompleteResponse@http :// localhost:8081/index.bundle?platform=ios&dev=true&minify=false :33556:29
emit@http :// localhost:8081/index.bundle?platform=ios&dev=true&minify=false :9744:42
__callFunction@http :// localhost:8081/index.bundle?platform=ios&dev=true&minify=false :5491:49
http://localhost :8081/index.bundle?platform=ios&dev=true&minify= false:5213 :31
__guard@http :// localhost:8081/index.bundle?platform=ios&dev=true&minify=false :5445:15
callFunctionReturnFlushedQueue@http :// localhost:8081/index.bundle?platform=ios&dev=true&minify=false :5212:21
callFunctionReturnFlushedQueue@[本机代码]

Info.plist 设置为允许本地主机请求。

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

我的 package.json:

{
  "name": "EstimateMobileApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "ios": "react-native run-ios",
    "android": "react-native run-android",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.4.2",
    "@react-navigation/stack": "^5.3.9",
    "@types/react-native-vector-icons": "^6.4.5",
    "expo": "^37.0.12",
    "expo-av": "^8.1.0",
    "react": "^16.11.0",
    "react-native": "^0.62.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^1.8.0",
    "react-native-safe-area-context": "^1.0.2",
    "react-native-screens": "^2.7.0",
    "react-native-unimodules": "^0.9.1",
    "react-native-vector-icons": "^6.6.0",
    "tailwind-rn": "^1.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/runtime": "^7.9.0",
    "@react-native-community/eslint-config": "^0.0.5",
    "@types/jest": "^25.2.3",
    "@types/react": "^16.9.35",
    "@types/react-native": "^0.62.10",
    "@types/react-test-renderer": "^16.9.2",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.11.0",
    "tailwindcss": "^1.4.6",
    "typescript": "^3.9.3"
  },
  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-(native|universal|navigation)-(.*)|@react-native-community/(.*)|@react-navigation/(.*))"
    ]
  }
}

还有我的 Podfile:

platform :ios, '10.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
require_relative '../node_modules/react-native-unimodules/cocoapods.rb'

def flipper_pods()
  flipperkit_version = '0.46.0'
  pod 'FlipperKit', '~>' + flipperkit_version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitLayoutPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
  pod 'FlipperKit/SKIOSNetworkPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitUserDefaultsPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitReactPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
end

# Post Install processing for Flipper
def flipper_post_install(installer)
  file_name = Dir.glob("*.xcodeproj")[0]
  app_project = Xcodeproj::Project.open(file_name)
  app_project.native_targets.each do |target|
    target.build_configurations.each do |config|
      cflags = config.build_settings['OTHER_CFLAGS'] || '$(inherited) '
      unless cflags.include? '-DFB_SONARKIT_ENABLED=1'
        puts 'Adding -DFB_SONARKIT_ENABLED=1 in OTHER_CFLAGS...'
        cflags << '-DFB_SONARKIT_ENABLED=1'
      end
      config.build_settings['OTHER_CFLAGS'] = cflags
    end
    app_project.save
  end
  installer.pods_project.targets.each do |target|
    if target.name == 'YogaKit'
      target.build_configurations.each do |config|
        config.build_settings['SWIFT_VERSION'] = '4.1'
      end
    end
  end
  installer.pods_project.save
end

target 'EstimateMobileApp' do
  # Pods for EstimateMobileApp
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga', :modular_headers => true

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  target 'EstimateMobileAppTests' do
    inherit! :complete
    # Pods for testing
  end

  use_native_modules!
  use_unimodules!

  flipper_pods()
  post_install do |installer|
    flipper_post_install(installer)
  end
end

target 'EstimateMobileApp-tvOS' do
  # Pods for EstimateMobileApp-tvOS

  target 'EstimateMobileApp-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end
end

我有反应原生 v59。 那么,不使用 Flipper 的人能做什么呢? 有更新吗?

我以前的版本没有这个问题。 我认为您的问题可能有所不同。 您使用的是 https 网址吗?

我有反应原生 v59。 那么,不使用 Flipper 的人能做什么呢? 有更新吗?

我以前的版本没有这个问题。 我认为您的问题可能有所不同。 您使用的是 https 网址吗?

是的,https。
RN 中的 formData 对象是否有任何限制,例如,它可以是字符串长度或 formData 大小? 看起来 RN 拦截了这个请求并抛出了这个错误

我有反应原生 v59。 那么,不使用 Flipper 的人能做什么呢? 有更新吗?

我以前的版本没有这个问题。 我认为您的问题可能有所不同。 您使用的是 https 网址吗?

是的,https。
RN 中的 formData 对象是否有任何限制,例如,它可以是字符串长度或 formData 大小? 看起来 RN 拦截了这个请求并抛出了这个错误

我不知道有任何此类限制。 可以分享一下代码吗? 这在 iOS 上有效吗?

我需要达到这样的请求正文结构:

{
    "user_uuid":"9a137...",
    "contract_uuid":"881d9...",
    "files":[
        {"document_type_id":"20","document_type_title":"test1","private_flag":"0","file":{}},
        {"document_type_id":"21","document_type_title":"test2","private_flag":"1","file":{}},
        {"document_type_id":"22","document_type_title":"test3","private_flag":"1","file":{}}
    ]
}

其中文件是具有nametypeurisize等字段的 JS 文件对象

const fileArrayToSend = await Promise.all(
            fileSelect.map(async (file, index) => {
                const documentTypeNum = Number(documentType[index]) || 0;

                return {
                    document_type_id: documentTypeNum,
                    document_type_title: customType ? customType[index] : null,
                    private_flag: isPrivate[index] ? 1 : 0,
                    file: {
                        name: file.name, 
                        type: file.type,
                        uri: file.uri, 
                        size: file.size
                    }
                };
            })
        );
let body = {
    contract_uuid: contract.uuid,
    user_uuid: userUUID
};

const formData = new FormData();
const appendToFormData = (formData, object) => {
    for (let [key, value] of Object.entries(object)) {
        if (value) {
            formData.append(key, value);
        }
    }
};
appendToFormData(formData, body);

fileArrayToSend.forEach((file, index) => {
    formData.append(`files[${index}]`, file, file.file.name);
});
let response = await Axios.post(`${config.apiEndpoint}/store_document_request_action`, formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
});

image

我在使用 react-native 版本 0.62 的项目中遇到了同样的问题。
我将脚蹼更新为“0.41.0”并且它起作用了。
在 gradle.properities
FLIPPER_VERSION=0.41.0

我在使用 react-native 版本 0.62 的项目中遇到了同样的问题。
我将脚蹼更新为“0.41.0”并且它起作用了。
在 gradle.properities
FLIPPER_VERSION=0.41.0

你能提一下gradle.properties的路径吗,android中的gradle.properties不包含flipper版本。 但是 react android 文件夹中的 gradle.properties 有鳍状肢版本。

@nharis7它在 /android/gradle.properties
Annotation 2020-06-12 210640
但是你的 react-native 版本是什么? 鳍状肢仅在 react-native 版本 0.62 及更高版本中。 旧版本没有脚蹼。

@nharis7它在 /android/gradle.properties
Annotation 2020-06-12 210640
但是你的 react-native 版本是什么? 鳍状肢仅在 react-native 版本 0.62 及更高版本中。 旧版本没有脚蹼。

目前我在 0.62.2 并且我已经在我的 /android/gradle.properties 中从 0.61 升级了我的项目。 我已经用它创建了一个新项目,现在我可以在 /android/gradle.properties 中看到鳍状肢版本。 我会将我所有的东西迁移到新项目中,看看这个问题是否得到解决。

这个解决方案对我有用
https://github.com/axios/axios/issues/1567#issuecomment -518118223

升级鳍状肢修复它! (我升级到 0.46.0)

我一直在上面尝试!
只有将脚蹼升级到 0.46 才能修复它!

image

"dependencies": {
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/cameraroll": "^1.7.2",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/drawer": "^5.8.1",
    "@react-navigation/material-bottom-tabs": "^5.2.9",
    "@react-navigation/native": "^5.5.0",
    "@react-navigation/stack": "^5.4.1",
    "axios": "^0.19.2",
    "mime-types": "^2.1.27",
    "path": "^0.12.7",
    "query-string": "^6.13.1",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-animatable": "^1.3.3",
    "react-native-animate-loading-button": "^1.0.3",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-image-picker": "^2.3.1",
    "react-native-image-resizer": "^1.2.3",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-paper": "^3.10.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.0.2",
    "react-native-screens": "^2.8.0",
    "react-native-swiper": "^1.6.0",
    "react-native-vector-icons": "^6.6.0"
  },

通过在这个文件中升级 Flipper 解决了这个问题

/yourproject/android/gradle.properties第 28 行

25  android.enableJetifier=true  
26  
27  # Version of flipper SDK to use with React Native 
28  FLIPPER_VERSION=0.41.0  //upgrade to latest flipper

看 :
facebook/flipper#993(评论)

它工作得很好,解决了android上的问题,非常感谢你。

我遇到了同样的问题,它发生在Android上,但在IOS上运行良好。
我认为这个问题是关于 Flipper Network 的。

目前,我评论了
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

在这个文件中
/android/app/src/main/java/com/{your_project}/MainApplication.java

它对我有用:)

我遇到了同样的问题,它发生在 Android 中,但在 IOS 中运行良好。
我猜这个问题是关于 Flipper Network 的。

有一段时间,我评论了
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

在这个文件中
/android/app/src/main/java/com/{your_project}/MainApplication.java

我对此进行了测试,然后我就可以上传文件了

谢谢@alfianwahid

将脚蹼升级到0.46.0修复它!


android\gradle.properties

这个问题花了我5个多小时才解决。 当我终于能够解决这个问题时,我正要放弃。

我面临的与您提到的问题接近的问题是,我在使用 expo-image-picker 并尝试使用axios上传文件时遇到了 NetworkError 。 它在 iOS 中运行良好,但在 android 中无法运行。

这就是我解决问题的方法。

这里有两个独立的问题在起作用。 假设我们从 image-picker 获得imageUri ,然后我们将使用以下这些代码行从前端上传。

const formData = new FormData();
formData.append('image', {
 uri : imageUri,
 type: "image",
 name: imageUri.split("/").pop()
});

第一个问题是imageUri本身。 如果假设照片路径是/user/.../path/to/file.jpg 。 然后 android 中的文件选择器将imageUri值作为file:/user/.../path/to/file.jpg而 iOS 中的文件选择器将imageUri值作为file:///user/.../path/to/file.jpg

第一个问题的解决方案是在android中使用file://而不是file: formData

第二个问题是我们没有使用正确的 mime 类型。 它在 iOS 上运行良好,但在 Android 上却不行。 更糟糕的是,文件选择器包将文件类型指定为“图像”,并且没有提供正确的 mime 类型。

解决方案是在type字段的formData中使用正确的 mime 类型。 例如: .jpg image/jpeg.png文件为image/png 。 我们不必手动执行此操作。 相反,您可以使用一个非常著名的 npm 包,称为mime

最终的工作解决方案是:

import mime from "mime";

const newImageUri =  "file:///" + imageUri.split("file:/").join("");

const formData = new FormData();
formData.append('image', {
 uri : newImageUri,
 type: mime.getType(newImageUri),
 name: newImageUri.split("/").pop()
});

我希望这有助于解决您的问题。 :)

当您遇到 formData 网络错误时,您必须检查 formData 的正确性。 这很重要。

安卓/gradle.properties
升级脚蹼
FLIPPER_VERSION=0.41.0

仍然面临问题的人可以这样做

让数据 = 新的 FormData();

data.append('动作', '添加');
data.append('param', 0);
data.append('secondParam', 0);
data.append('file', new Blob([payload], { type: 'text/csv' }));

// 这行得通
让请求 = 新 XMLHttpRequest();
request.open('POST', url);
请求.发送(数据);

它会工作 (:+1: (:100:

看起来很多人已经能够通过更新他们的脚蹼版本来解决这个问题。 这是伟大的。 但也有很多人经历了痛苦才能找到这个问题并得到解封。

所以问题是:什么会使发现这一点更容易? 固定问题? 一个已解决的问题(因为它似乎已经解决了?)仍然可以发现吗? 堆栈溢出链接? 看起来这个问题已经解决了,但我们不希望人们继续浪费时间试图找到一个已知的解决方案。

这应该在升级完成后立即关闭 - https://github.com/facebook/react-native/pull/29033。 在此之前,我们可能会考虑将其固定。

将脚蹼版本更新到 0.46.0 后我仍然遇到同样的问题

我自己也有同样的问题。 有人请帮助我们

  const imageUrl = 'http://febbler.com/20150425_114106.jpg';
    // if (true) {
    // const fileToUpload = res;
    const formData = new FormData();
    formData.append('name', 'Image Upload');
    formData.append('file_attachment', {
        uri: imageUrl,
        type: "image/jpeg",
        name: 'floral-spring-natural-landscape-wild-260nw-1274207287.jpg'
    });
    Axios({
        url: URL + '/VideosController/upload',
        method: 'POST',
        data: formData,
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data'
        },
    }).then(
        response => {
            alert('res' + JSON.stringify(response.data));
        },
        error => {
            alert('check+ ' + error);
            console.warn(error);
        })
        .catch(error => {
            alert('No error' + error);
        });

我不知道我做错了什么可以有人帮我解决吗?

如果我更新 FLIPPER_VERSION=0.41.0 应用程序本身甚至没有打开。

也许这可以帮助仍然对此有问题的人。
您是否使用 Microsoft 的 WAF(Web 应用程序防火墙)策略? 如果是这样的话; 他们有一个错误(或 React Native,不确定到底是谁的责任)阻止了类似的请求,但仅在某些时候,并且仅在 iOS 上。 在 RN 的最低级别生成的多部分形式边界有时包含策略阻止的字符(可能是. )。

这需要我们很多天才能弄清楚。 微软承认了这一点。 我们禁用了相关的 WAF 策略来解决此问题。 例如,这在 PostMan 中不会发生。 这会产生与 RN 不同的边界。

将鳍状肢升级到 0.44.0 和 React-native 0.63.0 ,我仍然有同样的问题

我通过在
/android/app/src/debug/java/com/{your-app-name}/ReactNativeFlipper.java
文件。
这只是对我有用的修复程序!

新的 NetworkingModule.CustomClientBuilder() {
@覆盖
公共无效应用(OkHttpClient.Builder 构建器){
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
}
});

如果您尝试了上述所有操作,但没有任何帮助,并且您使用图像选择器和表单数据,请尝试将其添加到图像选择器选项中:
``` js
让选项 = {
标题:'选择图像',
无数据:真,
最大宽度:500,
最大高度:500,
};
ImagePicker.showImagePicker(选项,响应 => {
.
.

Form data should look like this then:

```js
 const formData = new FormData();
        formData.append('avatar', {
          uri: response.uri, 
          name: response.fileName,
          type: 'image/jpeg',
        });

我遇到了同样的问题,它发生在 Android 中,但在 IOS 中运行良好。
我猜这个问题是关于 Flipper Network 的。

有一段时间,我评论了
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

在这个文件中
/android/app/src/main/java/com/{your_project}/MainApplication.java

我在使用 react-native 版本 0.62 的项目中遇到了同样的问题。
我将脚蹼更新为“0.41.0”并且它起作用了。
在 gradle.properities
FLIPPER_VERSION=0.41.0

这两种方法都适合我。 但只使用一种解决方案。 谢谢两位。 @alfianwahid @dmobisoft
想想FLIPPER_VERSION=0.41.0更好的解决方案。

来自 React 本地开发人员的任何人都知道这个令人不安的问题,因为任何拥有 MANAGED WORKSPACE(例如 Expo)的人都无法使用 RN Flipper hack 实现提议的“解决方案”。您有任何针对诸如 Expo 的托管工作空间提出的解决方案吗?

@Hiti3我建议在此处的 Expo 存储库上创建一个问题: https ://github.com/expo/expo,因为此处的解决方案不适用于托管工作区。

抄送@brentvatne

@Hiti3 - 这不会影响托管的博览会应用程序,因为它们中没有集成鳍状肢。 如果您看到此错误,那是由于本问题中提到的其他原因,如果您无法找到解决方案,您最好的做法是创建一个mcve并将其发布到https://github.com/世博会/世博会/问题

对我来说也没有工作给出错误[TypeError:网络请求失败]

代码

常量用户名 = this.state.values.username;
常量姓氏 = this.state.values.lastname;
常量图像路径= this.state.images_list[0].url.uri;

                    const data = new FormData();
                   // data.append('name', 'Image Upload');
                    data.append('email', email);
                    data.append('username', username);
                    data.append('file',  { uri:images_path, name: 'image.jpg', type: 'image/jpeg/jpg',path:images_path);

                    let res = await fetch(
                        'IP-Address/cowsoncloud/admin/cowRegister.php',{
                        method: 'POST',
                        body: data,
                        headers: {
                            'Accept': "application/json",
                            'Content-Type': 'multipart/form-data',
                        },
                        })
                    .then(response => response.json())
                        .then(responseJson => {
                        console.log('upload succes',+responseJson);
                        alert('Upload success!'+JSON.stringify(responseJson));
                        })
                        .catch(error => {
                        console.log('upload error', error);
                        alert('Upload failed!'+error);
                        });

                    } else {
                    alert('Please Select File first');
                    }
                };

对我来说也没有工作给出错误[TypeError:网络请求失败]

代码

常量用户名 = this.state.values.username;
常量姓氏 = this.state.values.lastname;
常量图像路径= this.state.images_list[0].url.uri;

                    const data = new FormData();
                   // data.append('name', 'Image Upload');
                    data.append('email', email);
                    data.append('username', username);
                    data.append('file',  { uri:images_path, name: 'image.jpg', type: 'image/jpeg/jpg',path:images_path);

                    let res = await fetch(
                        'IP-Address/cowsoncloud/admin/cowRegister.php',{
                        method: 'POST',
                        body: data,
                        headers: {
                            'Accept': "application/json",
                            'Content-Type': 'multipart/form-data',
                        },
                        })
                    .then(response => response.json())
                        .then(responseJson => {
                        console.log('upload succes',+responseJson);
                        alert('Upload success!'+JSON.stringify(responseJson));
                        })
                        .catch(error => {
                        console.log('upload error', error);
                        alert('Upload failed!'+error);
                        });

                    } else {
                    alert('Please Select File first');
                    }
                };

您将 IP 地址作为字符串 URL 再次检查错误。

当我在没有文件(图像)的情况下发布时,我会正常工作,当我发送图像文件时显示错误 [TypeError: Network request failed]; 不要对 URL 保持警惕

我通过在
/android/app/src/debug/java/com/{your-app-name}/ReactNativeFlipper.java
文件。
这只是对我有用的修复程序!

新的 NetworkingModule.CustomClientBuilder() {
@覆盖
公共无效应用(OkHttpClient.Builder 构建器){
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
}
});

试试这个对我有用

我也有同样的问题。 我为此使用 hack https://github.com/facebook/react-native/issues/29021#issuecomment -662196480。

如果你有鳍状肢版本 0.37.0,将它撞到 0.41.0,它在我的工作。

我遇到了同样的问题,它发生在 Android 中,但在 IOS 中运行良好。
我猜这个问题是关于 Flipper Network 的。

有一段时间,我评论了
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

在这个文件中
/android/app/src/main/java/com/{your_project}/MainApplication.java

非常感谢它在我的项目中完美运行。
我只是想知道您如何确定 Flipper 初始化程序是导致该错误的原因?

@alfianwahid

只为分享。 对于 android,您可以尝试将 Flipper 版本升级到 0.41,然后它就可以正常工作了。 但是对于 IOS,即使 IOS 翻板版本是 0.41.5,我仍然面临同样的问题。 所以对于 IOS,我手动更新了 node_modules/react-native/Libraries/Network/RCTNetworkTask.mm,它现在正在 IOS 上运行。

请你能告诉我如何将脚蹼 FLIPPER_VERSION=0.33.1 升级到 0.41

@sureshhallyali ,您可以在 android/gradle.properties 文件中更新 FLIPPER_VERSION=0.41.0 。 之后清理 android 构建并再次运行-android。

只是为了分享,我在我的 Ubuntu 上使用 Flipper 0.50 并将android/gradle.properties更新为FLIPPER_VERSION=0.50.0也可以正常工作。

我已经尝试了上述所有解决方案(从升级鳍状肢到注释掉到删除调试文件夹等等),但没有一个对我有用,尽管图像保存在服务器中,但我仍然得到network errorreact-native 0.62.2 ,我已经尝试了2天了,这真是令人沮丧...

这是我的代码

let formData = new FormData();

    formData.append('id', hospitalId);
    formData.append('date', dataObj.date);
    formData.append('questions', dataObj.questions);

    dataObj.attachments.forEach((attachment) => formData.append('attachments[]', attachment));

    this.props.submit(formData);

提交(简而言之)

try {
      const res = await axios.post(url, formData, {
        headers: {
          Authorization: token ? `Bearer ${token}` : null,
          deviceId: getUniqueId(),
          Accept: 'application/json',
          'Content-Type': `multipart/form-data`,
        },
      });
      console.log('SUBMIT RES >>>> ', res.data);
    } catch (err) {
      console.log('errrr >>>> ', err.response);
      console.log('errrr >>>> ', err);
    }

这个问题在0.63.1中得到解决了吗?

更新:
升级到0.63.2仍然,问题依旧

只是为了分享,我在我的 Ubuntu 上使用 Flipper 0.50 并将android/gradle.properties更新为FLIPPER_VERSION=0.50.0也可以正常工作。

@vinifraga ,你如何升级IOS中的Flipper版本? 我知道如何在 android 上升级,但不知道如何从那里升级 ios/podfile?

大家好,试试rn-fetch-blob这对我有用
我正在使用 Axios 上传图像但它不适用于 android 所以经过这么多搜索后我找到了这个包并且它有效

链接在这里获取包

尝试了一切(其他库也 rn-fetch-upload,rn-background-upload,...),图像上传在 iOS 上不起作用,在 Android 上很好。 使用预签名 URL 在 S3 上上传总是返回给我这个(在 RN -v 0.59.x 上运行良好,在 RN -v 0.61.x 上不再运行:
````
"
EntityTooLarge
您建议的上传超出了允许的最大大小
2025220
2023115
{...}
5n+{...}
"

@MayoudP试试rn-fetch-blob也许这会奏效

谢谢@abumostafa

我尝试了所有解决方案但没有工作
1:需要添加
uesCleartextTraffic="true" 到目录 android/app/src/main/AndroidManifest.xml 中的 AndroidManifest.xml 文件
用于处理 http 和 https

2:需要评论
// initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
在这个文件/android/app/src/main/java/com/{your_project}/MainApplication.java
3:需要评论
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
在他的文件 android/app/src/debug/java/com/{your_project}/ReactNativeFlipper.java
4:有人告诉升级反应原生到 63.2 也完成了
5:FLIPPER版本升级到50.0

现在需要尝试一个:rn-fetch-blob
https://github.com/facebook/react-native/issues/29493

3:需要评论
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

终于在安卓工作了

在需要表单数据的 API 调用中使用rn-fetch-blob是可行的(iOS 已确认,尚不确定 Android),我只是在那里替换了我的常规 fetch 调用(请参阅自述文件):

https://github.com/joltup/rn-fetch-blob

这个问题真的会持续4个月吗?

@MayoudP试试rn-fetch-blob也许这会奏效

不,它没有工作,没有成功使用预签名的 URL 和 S3 使其工作......

只为分享。 对于 android,您可以尝试将 Flipper 版本升级到 0.41,然后它就可以正常工作了。 但是对于 IOS,即使 IOS 翻板版本是 0.41.5,我仍然面临同样的问题。 所以对于 IOS,我手动更新了 node_modules/react-native/Libraries/Network/RCTNetworkTask.mm,它现在正在 IOS 上运行。

@anthony1110你在node_modules/react-native/Libraries/Network/RCTNetworkTask.mm中更新了什么?

@MayoudP试试rn-fetch-blob也许这会奏效

不,它没有工作,没有成功使用预签名的 URL 和 S3 使其工作......

只是 RNFS 工作 rn

@andrekovac ,您可以关注此线程并关注 IOS 和 android 解决方案。 https://github.com/facebook/react-native/issues/29021#issuecomment -664030881

应用提到的补丁@anthony1110对我不起作用。 仍然出现网络错误。

但是一个解决方案(对于 React Native 0.63 )似乎即将推出: https ://github.com/facebook/react-native/issues/29364#issuecomment -664526253

@andrekovac ,不要跟着我的补丁,那个是黑客。 糟糕的解决方案。 对于 IOS 问题,您应该关注更新https://github.com/facebook/react-native/issues/29364#issuecomment -663005914。

谁还在为这个问题苦苦挣扎。 这是因为 Flipper 网络插件而发生的。
我禁用了它,一切正常。

我完成这项工作的解决方法是注释掉第 43 行

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

在这个文件中android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

我试试这个并且 100% 有效

谁还在为这个问题苦苦挣扎。 这是因为 Flipper 网络插件而发生的。
我禁用了它,一切正常。

我完成这项工作的解决方法是注释掉第 43 行

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

在这个文件中android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

这有效(Y)

这个虫子会让我发疯
以上所有解决方案均无效

@victor012888已经尝试过rn-fetch-blob

我用上传FLIPPER_VERSION=0.50.0的方式终于解决了
我的问题是 INSTALL_FAILED_INSUFFICIENT_STORAGE 因为新包太大
为虚拟机添加更多 RAM 后,一切正常

我都试过了,还是有问题。
不仅是调试版,还有发布版。

我现在已经解决了我的问题!
①更新FLIPPER_VERSION=0.52.0最新

②formData这样的代码
让 formData = new FormData();
this.state.pics.map((value,index) => {
控制台日志(值)
控制台日志(索引)
let file = { uri:value.uri , type: 'multipart/form-data', name:value.uri.substr (value.uri.length-10,10)};
formData.append('file'+index,file)
})

type 必须是 'multipart/form-data' ,与 post header 相同。


希望可以帮助某人

我用上传FLIPPER_VERSION=0.50.0的方式终于解决了
我的问题是 INSTALL_FAILED_INSUFFICIENT_STORAGE 因为新包太大
为虚拟机添加更多 RAM 后,一切正常

如何更新鳍状肢

我有这个问题,从 RN63+ 开始,我没有脚蹼。 鳍状肢完全卸载。

它也只发生在带有multipart/form-data的文件上传中,类型已定义。 但是每次在android上都会跳过请求。

您好,我正在使用带有 RN 0.62.2 的 expo 38
我正在使用裸工作流,所以我可以编辑本机代码。
即使我尝试了列出的每个修复程序,我也有同样的问题:

  • 将 gradle.properties 中的 Flipper 更新为 0.52.0
  • 注释掉 MainApplication.java 中的 initializeFlipper 行
  • 为“文件”formData 参数的类型尝试了所有可能的配置。

我的代码看起来像这样

export const createFileUploadFormData = (file, body) => {
  const isAndroid = Platform.OS === 'android'
  const fileUri = isAndroid ? file.uri : file.uri.replace('file://', '')
  const fileType = mime.getType(fileUri) || file.type
  const formData = new FormData()
  formData.append('file', {
    name: file.fileName,
    type: fileType,
    uri: fileUri,
  })
  if (body && body.length) {
    Object.keys(body).forEach((key) => {
      formData.append(key, body[key])
    })
  }
  return formData
}

知道我可能会错过什么吗?

不幸的是,提到的关于评论 Flipper 代码行等的解决方法对我不起作用。

我设法通过使用rn-fetch-blob来完成这项工作。

下面是一段代码,展示了我如何使用该库上传 pdf 文件:

const response = await RNFetchBlob.fetch(
  'POST',
  'http://192.168.0.20:3000/files',
  {
    Accept: 'application/json',
    'Content-Type': 'multipart/form-data',
  }, [
    {
      name: 'file',
      originalname: 'avataroriginalname',
      filename: 'avatar.pdf',
      type: 'application/pdf',
      data: RNFetchBlob.wrap(<path-to-file>),
    },
  ]
)

我遇到了同样的问题,它发生在 Android 中,但在 IOS 中运行良好。
我猜这个问题是关于 Flipper Network 的。

有一段时间,我评论了
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

在这个文件中
/android/app/src/main/java/com/{your_project}/MainApplication.java

兄弟它的工作完美,谢谢👍

您好,我正在使用带有 RN 0.62.2 的 expo 38
我正在使用裸工作流,所以我可以编辑本机代码。
即使我尝试了列出的每个修复程序,我也有同样的问题:

  • 将 gradle.properties 中的 Flipper 更新为 0.52.0
  • 注释掉 MainApplication.java 中的 initializeFlipper 行
  • 为“文件”formData 参数的类型尝试了所有可能的配置。

[...]

啊啊啊我发现我错过了什么!
就我而言,由于旧的复制粘贴>。<
我正在使用

const headers = {
  Accept: 'application/json',
  'Content-Type': 'application/json',
}

相反,它应该是:

const headers = {
    Accept: 'application/json',
    'Content-Type': 'multipart/form-data',
  }

棘手的部分是:

  1. 这个错误适用于 iOS
  2. 几个月来它一直在 Android 上一直这样,上传文件没有问题

似乎自从上次更新 RN 以来,使用 Android 不再容忍此类错误。

我遇到了同样的问题,它发生在 Android 中,但在 IOS 中运行良好。
我猜这个问题是关于 Flipper Network 的。

有一段时间,我评论了
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

在这个文件中
/android/app/src/main/java/com/{your_project}/MainApplication.java

我在尝试使用 XHR 上传到 S3 时收到stream closed ,这解决了问题,谢谢👍

我将 Flipper 升级到 0.51.2 版本,它对我有用。

我将 Flipper 升级到 0.51.2 版本,它对我有用。

你好@omid-ebrahimi,你是如何升级 Flipper 版本的?

谢谢

同样的问题 0.63.2

我将 Flipper 升级到 0.51.2 版本,它对我有用。

你好@omid-ebrahimi,你是如何升级 Flipper 版本的?

谢谢

转到android/gradle.properties并添加这一行

FLIPPER_VERSION=0.52.1

您的android/app/build.gradle中应该有以下几行:

dependencies {
    // ....

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
      exclude group:'com.facebook.fbjni'
    }

    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    // ...
}

我将 Flipper 升级到 0.51.2 版本,它对我有用。

你好@omid-ebrahimi,你是如何升级 Flipper 版本的?
谢谢

转到android/gradle.properties并添加这一行

FLIPPER_VERSION=0.52.1

您的android/app/build.gradle中应该有以下几行:

dependencies {
    // ....

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
      exclude group:'com.facebook.fbjni'
    }

    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    // ...
}

@omid-ebrahimi 升级鳍状肢也解决了这个问题,谢谢,我已经在 StackOverflow 上打开了一个关于这个问题的问题,请在那里提交这个答案,我可以将赏金奖励给你。

我将 Flipper 升级到 52.0 版
并使用 fetch 它对我有用
但是当使用axios.post时不起作用
当使用 axios 时
axios({ method:'post , data : file , url:'something ',............. })
它工作正常

并且不要设置标题
'Content-Type': 'multipart/form-data'
它也可以正常工作

谁还在为这个问题苦苦挣扎。 这是因为 Flipper 网络插件而发生的。
我禁用了它,一切正常。

我完成这项工作的解决方法是注释掉第 43 行

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

在这个文件中android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

@abumostafa您提供的解决方案是有效的,但它仍然不适用于以“file:///”开头的文件。
例如:

  • 这可以工作: formData.append('files', {uri:'https://xxx.jpg', type:'image/jpeg', name:'test.jpeg' })
  • 这不起作用: formData.append('files', {uri:'file:///xxx.jpg', type:'image/jpeg', name:'test.jpeg' })

我的 react 原生版本:

"dependencies": {
    "react": "^16.11.0",
    "react-native": "^0.62.2"
  }

同样的问题尝试升级鳍状肢但不起作用。

{
 "react": "16.13.1",
  "react-native": "0.63.2",
}

iOS 怎么样?

在 iOS 上也有这个问题。 尝试在我的 Podfile 中将 Flipper 的版本从 0.33.1 更改为 0.50.0 及更高版本。 这发生在我身上

{
  "react": "16.11.0",
  "react-native": "0.62.2",
}

@abumostafa的建议使它适用于 Android,但仍然无法让它在 iOS 上运行。

编辑:升级到react-native: 0.63.2仍然是同样的问题。

更改 Flipper 版本对我不起作用。 我尝试注释掉可能有帮助但也面临同样问题的行。 我的解决方法是使用 WebView 和 injectJavascript 进行上传。 这个 hack 对我很有效。

我的解决方法是使用<WebView>并注入 javascript。当我想上传一个新文件时,我会将相关参数传递给字符串函数构建器generateUploadCodes() ,它将生成一个字符串,该字符串将是注入webview。

  function generateUploadCodes(name, data) {
    return `function upload() {
      let formData = new FormData();
      formData.append('file', new Blob(["${data}"], {type: 'text/csv'}));

      let xhr = new XMLHttpRequest();
      xhr.open("post","https://myuploadserver.com");
      xhr.setRequestHeader("Authorization", "Bearer ${accessToken}");
      xhr.responseType = "json";
      xhr.onload = () => {
         window.ReactNativeWebView.postMessage(xhr.response);
      };
      xhr.send(formData);
    }
    upload(); 
    `;
  }

有了这个我可以打电话

let toInject = generateUploadCodes("mydata.txt", "somedata");
webRef.current.injectJavascript(toInject);

要从上传中获取响应,我们可以使用webview.ReactNativeWebView.postMessage('our response'); 。 然后通过 WebView 的onMessage处理程序处理响应。

在这之前,我们首先像这样创建我们的 ref 和WebView组件

  const webview = useRef(null);

  <WebView
        ref={webview}
        source={{html: 'hi'}}
        injectedJavaScript={''}
        javaScriptEnabledAndroid={true}
        javaScriptEnabled={true}
        onMessage={event => {
              console.log(event.nativeEvent.data);
        }}
      />

把所有的修复放在一起,希望我们能尽快得到这个合并到核心的修复:

iOS:还原 PR,需要修改 node_modules: https ://github.com/facebook/react-native/issues/29364#issuecomment -671565181,此处提交的 PR 用于修复: https ://github.com/facebook/react

Android:升级 Flipper 版本https://github.com/facebook/react-native/issues/28551#issuecomment -674351386,公关提升https://github.com/facebook/react-native/pull/29787

如果有人在 RN 0.62 或更高版本中仍然遇到问题,解决方案是:
您必须提供要上传的媒体的 uri、名称和类型。

formData.append('media_incident', {
          uri: image.path,
          type: image.mime,
          name: 'filename.jpg',
        });

然后转到第 43 行并注释此行:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
在 android/app/src/debug/java/com/“项目名称”/ReactNativeFlipper.java

我花了将近 8 个小时来挖掘错误的解决方案。

如果有人在 RN 0.62 或更高版本中仍然遇到问题,解决方案是:
您必须提供要上传的媒体的 uri、名称和类型。

formData.append('media_incident', {
          uri: image.path,
          type: image.mime,
          name: 'filename.jpg',
        });

然后转到第 43 行并注释此行:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
在 android/app/src/debug/java/com/“项目名称”/ReactNativeFlipper.java

我花了将近 8 个小时来挖掘错误的解决方案。

是的,我也是这样,在这里确认: https ://github.com/facebook/react-native/issues/29364#issuecomment -679370449

把所有的修复放在一起,希望我们能尽快得到这个合并到核心的修复:

iOS:还原 PR,需要修改 node_modules: https ://github.com/facebook/react-native/issues/29364#issuecomment -671565181,此处提交的 PR 用于修复: https ://github.com/facebook/react

Android:升级 Flipper 版本https://github.com/facebook/react-native/issues/28551#issuecomment -674351386,公关提升https://github.com/facebook/react-native/pull/29787

我遇到了同样的问题,这里没有一个解决方案对我有用。

有用的是我只是错过了我上传的 mime_type。

确保正确获取这些数据:

  • 乌里
  • 姓名
  • 类型

将脚蹼升级到FLIPPER_VERSION=0.52.1

更改此文件 - android/gradle.properties并运行yarn android

fetch

let uriParts = this.state.pickedFileUri.split('.');
let fileType = uriParts[uriParts.length - 1];
const file = {
            uri: this.state.pickedFileUri, // works with fileurl like file:///.....
            name: `myFile.${fileType}`,
            type: `text/${fileType}`,
        };

const data = new FormData();
data.append('file', file);
return fetch(url, {
        method: 'POST',
        body: data,
});

包.json

   "react": "16.11.0",
    "react-native": "0.62.2",

有没有使用 Expo 的解决方法?

有人解决这个问题吗? 已经尝试了每一种方法,比如评论一些鳍状肢命令,升级 graddle.properties 上的鳍状肢,即使我将我的 RN 从 0.63 降级到 0.62 仍然出现此错误。 已经在这个错误上停留了 2 天。 当我尝试将没有文件的数据发布到我的 API 时,它工作正常,但是当我尝试将图像等文件上传到我的 API 时,我收到了这个错误

@safaiyeh仍然对我不起作用,先生,我已经全部尝试过了。

如果有人在 RN 0.62 或更高版本中仍然遇到问题,解决方案是:
您必须提供要上传的媒体的 uri、名称和类型。

formData.append('media_incident', {
          uri: image.path,
          type: image.mime,
          name: 'filename.jpg',
        });

然后转到第 43 行并注释此行:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
在 android/app/src/debug/java/com/“项目名称”/ReactNativeFlipper.java

我花了将近 8 个小时来挖掘错误的解决方案。

我做了同样的事情,但仍然面临同样的问题。 我在用
“反应”:“16.13.1”,
“反应原生”:“0.63.1”,

@sadhruva我有和你一样的环境,为我解决了这个问题

我遇到了同样的问题。 这些类型的错误令人沮丧,因为除了等待修复版本之外,我们几乎无能为力。

我试过了:

  • 注释 java 文件中的行

  • 更改我的脚蹼版本

  • 以两种不同的方式编写代码

它仍然不起作用。 奇怪的是,该表单在我的应用程序的其他部分工作,但在那个特定的屏幕上它不起作用(仅在 android 上,因为在 iPhone 上它确实按预期工作)。

所以,似乎我现在唯一能做的就是继续只为 iOS 开发并推迟 android 的发布。

生活就是生活……我猜。

我遇到了同样的问题。 这些类型的错误令人沮丧,因为除了等待修复版本之外,我们几乎无能为力。

我试过了:

  • 注释 java 文件中的行
  • 更改我的脚蹼版本
  • 以两种不同的方式编写代码

它仍然不起作用。 奇怪的是,该表单在我的应用程序的其他部分工作,但在那个特定的屏幕上它不起作用(仅在 android 上,因为在 iPhone 上它确实按预期工作)。

所以,似乎我现在唯一能做的就是继续只为 iOS 开发并推迟 android 的发布。

生活就是生活……我猜。

遇到同样的问题。但是奇怪的是相同的功能与react一起工作正常,因此我去检查网络包,发现我的react webAPP网络请求包带有content -type:multipart/form-data header,而RN与content -type:application/form-data一起使用。
所以我像这样编辑了我的请求函数:
await fetch(url, { method: 'POST', headers: { 'Content-Type': 'multipart/form-data', }, body: formData, })
然后在 formData 中包含 type&name
let formData = new FormData(); formData.append('file', {uri: fileUri,type:fileType,name:fileName});
不知道为什么,但它只是奇迹般地工作。

我正在使用 react native 版本 0.63.2 并按照以下步骤解决问题
使用 react-native-cli

1 - 在android/app/src/main/java/com/{yourProject}/MainApplication.java
评论 -> initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

2 - 在android/app/src/debug/java/com/{yourProject}/ReactNativeFlipper.java
第 43 行的注释 -> builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

3 - 在android/gradle.properties
FLIPPER_VERSION=0.37.0更改为FLIPPER_VERSION=0.52.1

4 - 在android/app/build.gradle
将当前 Flipper 依赖项覆盖为

  dependencies {
    // ....

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
      exclude group:'com.facebook.fbjni'
    }

    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    // ...
  }

在所有这些步骤之后 -> npx react-native run-androidyarn android

5 - 在我的帖子上传请求中

  const data = new FormData();
  // Android need to add "file:///" to work

  const path =
    Platform.OS === 'android' ? `file:///${image?.path}` : image?.path;

    const file = { // use name, type, uri as object keys
      name: image?.fileName,
      type: image?.type,
      uri: path,
    };


    data.append('file', file);

    // using axios
    const response = await api.post(
          'apiurl',
          data,
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          },
        );

希望这可以帮助

@mathrocha12100你能正确格式化你的评论吗? 有些代码似乎不合适,我可能会尝试逐步完成。

问题是我真的不想弄乱 android 的配置。 但无论如何,请正确格式化您的答案,以帮助遇到此问题的每个人(包括我)。

干杯。

还是不行。

@dlogvin
我昨天遇到了这个问题并按照@omid-ebrahimi 所说的[升级 Flipper] 进行了修复,并评论了这一行
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); ReactNativeFlipper.java

清理构建文件夹[ios, android]
然后再次构建它对我来说很好:)

@dlogvin
我昨天遇到了这个问题并按照@omid-ebrahimi 所说的[升级 Flipper] 进行了修复,并评论了这一行
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); ReactNativeFlipper.java

清理构建文件夹[ios, android]
然后再次构建它对我来说很好:)

您如何准确升级脚蹼?

编辑:我已经尝试替换 FLIPPER 版本并评论这些行,但仍然没有。 实际上,在应用程序的调试版本中,注释行后图像不会加载。 这完全是一团糟……

android/ gradle.properties中的@dlogvin
将 FLIPPER_VERSION=0.37.0 更改为 FLIPPER_VERSION=0.52.1

如果您想知道,这里是 react 和 react-native 版本

 "react": "16.13.1",
  "react-native": "0.63.2",

@anastely我做到了......仍然没有:(

我要放弃...

@dlogvin我试图从服务器加载图像并且它已经加载,所以我很抱歉:(

如果您的项目开源,我可以检查一下

我很抱歉,但该项目不是开源的。 我曾尝试上传文件,该表单在其他屏幕上工作,但在这个特定的屏幕上却不行。 我将不得不等待RN的更新,同时我将制定iPhone版本并将Android版本保持在BETA中。

为我工作我将 gradle.setting 文件 FLIPPER_VERSION=0.30.2 中的鳍状肢版本更改为 FLIPPER_VERSION=0.52.1 然后清理 gradlew 并运行项目。
在反应原生使用 XMLHttpRequest 方法。
导出让 dataWithImage = async (endPoint, params) => {
让令牌 = 等待 AsyncStorage.getItem('token');
让 xhr = new XMLHttpRequest();
让 formData = new FormData();
for(输入参数){
formData.append(key, params[key]);
}
xhr.withCredentials = true;
xhr.addEventListener('readystatechange', function () {
如果(this.readyState === 4){
console.log(this.responseText, '===> 这是响应');
}
});
xhr.open('POST', url + endPoint);
xhr.setRequestHeader('Authorization', 'Bearer' + token);
xhr.send(formData);
};

我的服务器(HTTPS)上的 POST 请求遇到了类似的问题,适用于 iOS,但不适用于 android。 尝试禁用脚蹼并对其进行升级,但仍然遇到同样的问题。 尝试使用另一台服务器,例如(https://jsonplaceholder.typicode.com/)并且似乎按预期工作。

错误描述并没有告诉我太多“网络错误”,已经检查了互联网权限并在 android 清单上设置了android:usesCleartextTraffic= "true"。

fetch 或 axios 的问题相同。

对于 IOS 中
node_modules/react-native/Libraries/Image/RCTLocalAssetImageLoader.mm 文件

在下面替换

  • -(RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
    尺寸:(CGSize)尺寸
    规模:(CGF浮动)规模
    resizeMode:(RCTResizeMode)resizeMode
    progressHandler:(RCTImageLoaderProgressBlock)progressHandler
    partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
    completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
    {
    UIImage *image = RCTImageFromLocalAssetURL(imageURL);
    如果(图像){
    如果(进度处理程序){
    进度处理程序(1, 1);
    }
    完成处理程序(无,图像);
    } 别的 {
    NSString *message = [NSString stringWithFormat:@"找不到图片 %@", imageURL];
    RCTLogWarn(@"%@", 消息);
    完成处理程序(RCTErrorWithMessage(消息),无);
    }

    返回零;
    }

  • -(RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
    尺寸:(CGSize)尺寸
    规模:(CGF浮动)规模
    resizeMode:(RCTResizeMode)resizeMode
    progressHandler:(RCTImageLoaderProgressBlock)progressHandler
    partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
    completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
    {
    __block 自动取消 = std::make_shared<:atomic i="44">>(false);
    RCTExecuteOnMainQueue(^{
    如果(取消->加载()){
    返回;
    }

    UIImage *image = RCTImageFromLocalAssetURL(imageURL);
    如果(图像){
    如果(进度处理程序){
    进度处理程序(1, 1);
    }
    完成处理程序(无,图像);
    } 别的 {
    NSString *message = [NSString stringWithFormat:@"找不到图片 %@", imageURL];
    RCTLogWarn(@"%@", 消息);
    完成处理程序(RCTErrorWithMessage(消息),无);
    }
    });

    返回 ^{
    取消->商店(真);
    };
    }

这..

喜欢和爱,如果它有效👍

大家好,一个修复程序刚刚合并到master: https ://github.com/facebook/react-native/commit/d8b70b19b39ead4dd41895d666d116a43c56474e

还有一个 iOS 修复已经提交给 master。

我在这里提出了一个反向端口请求: https ://github.com/react-native-community/releases/issues/203#issuecomment -695052285,预计在 0.63.3 或 0.64

@safaiyeh你添加的这条评论让我欣喜若狂。 我希望尽快将我的手重新投入到 android 的开发中。

干杯。

非常感谢。

是的,很高兴每个人都会很快得到修复🙇‍♂️对我来说也有点忙,追着合适的人等等。 越来越近!

谢谢你,我在等它。
现在我正在使用@mathrocha12100 制作的相同解决方法。

我在iOS上面临类似的问题。 不是特定于文件,但在 iOS 上,我的 api 调用随机失败,相同的 api 请求将工作一次,其他时间失败,响应未定义。
在android上它一直工作正常
我正在使用 axios 0.19.2,尝试获取但结果相同
反应原生 0.62.2

@vajid-khan 您确认问题出在您的前端吗? 尝试使用 postman 或 Insomnia 来检查它是您的后端、您的反应本机代码还是框架本身。 我根本没有遇到其他 API 请求的任何问题。

@dlogvin是的,我已与邮递员确认。 有了邮递员,我每次都会收到回复,甚至 android 也一直在工作。 我只在 iOS 上面临这个问题

@dlogvin是的,我已与邮递员确认。 有了邮递员,我每次都会收到回复,甚至 android 也一直在工作。 我只在 iOS 上面临这个问题

@vajid-khan 这有点奇怪。 此特定问题基于对文件的 POST 方法的请求。 不妨进行一些调试,可能是标题或类似的东西。

@dlogvin是的,我已与邮递员确认。 有了邮递员,我每次都会收到回复,甚至 android 也一直在工作。 我只在 iOS 上面临这个问题

@vajid-khan 这有点奇怪。 此特定问题基于对文件的 POST 方法的请求。 不妨进行一些调试,可能是标题或类似的东西。

我确认了他的问题,正如@safaiyeh在 PR 中提到的那样,在将 Flipper 升级到 0.54.0 后,我在“ios”中也遇到过这个问题!


编辑:
当我打开 xCode 并发送请求时,我可以在日志中看到这一点

[native] Missing request token for request: <NSURLRequest: 0x600000dda4e0> { URL: file:///Users/anastely/Library/Developer/CoreSimulator/Devices/13C4E525-8577-44A3-A5F3-F6693B9CDFF6/data/Containers/Data/Application/FD4541BF-805A-4420-9AF3-0A9A55854126/tmp/react-native-image-crop-picker/7E060441-D875-4883-BD34-89872ECB3CB7.jpg }

所以我在搜索后得到了这个# https://github.com/facebook/react-native/commit/31980094107ed37f8de70972dbcc319cc9a26339
正如他们所说的那样替换它,
在某些情况下,发布请求有效!
在我的应用程序中,我在发布请求中发送图像,如果我从模拟器中的_默认图像中选择图像,_请求没有得到任何响应_'不像以前那样工作'_但上述问题消失了,
所以不知道怎么回事!
如果有人可以在他的物理设备中测试这个案例并让我们知道!

@mathrocha12100非常感谢你,你的回答解决了我的问题

同样的问题,尝试了这里所说的一切! 还是行不通!

尝试这个

let formData = new FormData();
formData.append('file', {
     name: filename,
     uri: uri // For android the path should start like this "content://". If uri starts with "file://", replace with "content://" 
     type: type
}
axios.post(URL, formData, { headers: { 'Content-Type': 'multipart/form-data'}})

尝试这个

let formData = new FormData();
formData.append('file', {
     name: filename,
     uri: uri // For android the path should start like this "content://". If uri starts with "file://", replace with "content://" 
     type: type
}
axios.post(URL, formData, { headers: { 'Content-Type': 'multipart/form-data'}})

这不是问题。 我的应用程序中的其他表单都可以使用,除了一个特定的表单。 这不是路径问题。

尝试这个

let formData = new FormData();
formData.append('file', {
     name: filename,
     uri: uri // For android the path should start like this "content://". If uri starts with "file://", replace with "content://" 
     type: type
}
axios.post(URL, formData, { headers: { 'Content-Type': 'multipart/form-data'}})

这不是问题。 我的应用程序中的其他表单都可以使用,除了一个特定的表单。 这不是路径问题。

是的,除了文件上传之外,其他发布方法也可以使用,因为它与 Flipper 相关。 将 Flipper 版本更改为 0.58 并在 android 文件夹中运行 gradlew clean。 对我来说,在此之后,只有更改为 content:// 对我有用,否则会导致网络错误。

@safaiyeh对此有何更新?
我想发布我的应用程序 :(

谁还在为这个问题苦苦挣扎。 这是因为 Flipper 网络插件而发生的。
我禁用了它,一切正常。

我完成这项工作的解决方法是注释掉第 43 行

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            <strong i="9">@Override</strong>
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

在这个文件中android/app/src/debug/java/com/**/ReactNativeFlipper.java

react native 0.63 仍然是一个问题。 这个解决方案对我有用。

同样的问题,尝试了这里所说的一切! 还是行不通!
@mathrocha12100的第一步解决了我的问题!
android/app/src/main/java/com/{yourProject}/MainApplication.java comment -> initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

这里同样的问题!

第一次尝试纠正问题:

将 Flipper 更新到 0.46.0(不起作用)
将 Flipper 更新到 0.52.0(不起作用)
评论 ReactNativeFlipper.java 的第 43 行(没用)
删除android/app/src/debug中的debug文件夹(没用)

我的项目中安装的版本:

“反应”:“16.13.1”,
“反应原生”:“0.63.2”,
“axios”:“^ 0.20.0”,

我们需要一个紧急的解决方案

这里同样的问题!

第一次尝试纠正问题:

将 Flipper 更新到 0.46.0(不起作用)
将 Flipper 更新到 0.52.0(不起作用)
评论 ReactNativeFlipper.java 的第 43 行(没用)
删除android/app/src/debug中的debug文件夹(没用)

我的项目中安装的版本:

“反应”:“16.13.1”,
“反应原生”:“0.63.2”,
“axios”:“^ 0.20.0”,

我们需要一个紧急的解决方案

我完全同意这一点……我们需要一个紧急的永久解决方案。 这延迟了我的项目,换句话说,它对我影响很大。 真的很烦人,等待的时间越来越长。 更新什么时候出来?

谢谢大家的耐心等待! 该修复程序已随 0.63.3 发布,请确保恢复您所做的任何工作并正确升级!

确保你也清理了你的 gradle 版本。

如果出现任何新问题,请创建一个新问题🎉🤟😁

谢谢大家的耐心等待! 该修复程序已随 0.63.3 发布,请确保恢复您所做的任何工作并正确升级!

确保你也清理了你的 gradle 版本。

如果出现任何新问题,请创建一个新问题🎉🤟😁

升级了,还是一样的问题。 我们应该更改 gradle.properties 吗? 我的表示FLIPPER_VERSION=0.33.1

更新:将 Flipper 版本更改为: 0.54.0 ,仍然无法正常工作。

没有遵循上面提供的任何类型的修复并升级的人,请确认这是否不是我自己遇到的问题。 这并没有解决问题。 @muriokrugner ??

@dlogvin我恢复了修改并升级到 63.3 版,但仍然无法正常工作,我们是否必须将 Flipper 更新到某个版本?

在我的项目中,Flipper 的版本是:0.37.0

然后更新没有用。

@safaiyeh

更新不起作用。

这是一个简单的事情,只是上传,它不起作用。 让我们开一个新问题

这是一个简单的事情,只是上传,它不起作用。 让我们开一个新问题

这是一件急需解决的简单问题。 很多应用程序都受此影响,上传文件是很多服务必须的。

我们应该打开一个新问题。

您可以将其用于完整差异https://react-native-community.github.io/upgrade-helper/

已经使用了,没有任何帮助。

也许这是一个愚蠢的问题:“D
但是你如何升级到最新的 0.63.3 版本呢?
使用助手和复制粘贴差异?

也许这是一个愚蠢的问题:“D
但是你如何升级到最新的 0.63.3 版本呢?
使用助手和复制粘贴差异?

npx react-native upgrade试试,但我有 99.99% 的把握“修复”不会奏效。

我将我的项目从 63.2 更新到 63.3,将 Flipper 从 0.37.0 更新到 0.54.0

但它仍然无法正常工作

难道我做错了什么?

升级到 0.63.3 后

当我从文件系统图像中选择图像并发送请求不起作用时,我在iOS中遇到了一些奇怪的问题! 但是当我下载一个随机图像然后再试一次它的工作非常好! “模拟器 13.3”

Android 运行良好 ;)

所以,这个问题还没有解决。

在这个新版本中,文件上传不是一个东西。

请重新打开问题@safaiyeh

让我们开一个新问题。 使用最新的 react native 进行最低限度的复制。

一个用于@anastely ios 问题和

@dlogvin Android 问题。

请在这个问题上标记我。

我在互联网上找到的所有解决方案,到目前为止都没有奏效。

从 React Native 的 0.62 版本开始,我就一直面临这个问题。

我有一个项目需要上传文件,但截止日期很短,所以另一种方法是将文件转换为 Base64 字符串并将其发送到后端。

然而,解决这个问题是非常紧迫的。

我在互联网上找到的所有解决方案,到目前为止都没有奏效。

从 React Native 的 0.62 版本开始,我就一直面临这个问题。

我有一个项目需要上传文件,但截止日期很短,所以另一种方法是将文件转换为 Base64 字符串并将其发送到后端。

然而,解决这个问题是非常紧迫的。

我同意,这是一个关键问题,它会影响所有使用文件上传的应用程序。

@safaiyeh是的,我会打开一个问题。 我到家时会做。

伙计们,我不买它。 有效!

对我有用的解决方案:我将 React Native 更新为 0.63.3,将 Flipper 更新为 0.54.0,但它仍然无法正常工作。

我重新启动了Android模拟器并再次打开它。 它奏效了!

谢谢你们!

伙计们,我不买它。 有效!

对我有用的解决方案:我将 React Native 更新为 0.63.3,将 Flipper 更新为 0.54.0,但它仍然无法正常工作。

我重新启动了Android模拟器并再次打开它。 它奏效了!

谢谢你们!

有趣的是……我为发布构建了应用程序……在物理设备上进行了测试,同样的事情。 我尝试使用调试 apk,同样的错误“网络错误”。

还没有解决。 将很快打开问题。

伙计们,我不买它。 有效!

对我有用的解决方案:我将 React Native 更新为 0.63.3,将 Flipper 更新为 0.54.0,但它仍然无法正常工作。

我重新启动了Android模拟器并再次打开它。 它奏效了!

谢谢你们!

请尝试在物理设备上运行调试和发布版本

伙计们,我不买它。 有效!
对我有用的解决方案:我将 React Native 更新为 0.63.3,将 Flipper 更新为 0.54.0,但它仍然无法正常工作。
我重新启动了Android模拟器并再次打开它。 它奏效了!
谢谢你们!

请尝试在物理设备上运行调试和发布版本

@dlogvin它也适用于物理设备,我相信它在缓存中

伙计们,我不买它。 有效!
对我有用的解决方案:我将 React Native 更新为 0.63.3,将 Flipper 更新为 0.54.0,但它仍然无法正常工作。
我重新启动了Android模拟器并再次打开它。 它奏效了!
谢谢你们!

请尝试在物理设备上运行调试和发布版本

@dlogvin它也适用于物理设备,我相信它在缓存中

我很高兴它为你解决了,但在我这边......我什至尝试了一个干净的构建,仍然没有运气......

如果有人在 RN 0.62 或更高版本中仍然遇到问题,解决方案是:
您必须提供要上传的媒体的 uri、名称和类型。

formData.append('media_incident', {
          uri: image.path,
          type: image.mime,
          name: 'filename.jpg',
        });

然后转到第 43 行并注释此行:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
在 android/app/src/debug/java/com/“项目名称”/ReactNativeFlipper.java

我花了将近 8 个小时来挖掘错误的解决方案。

在尝试了上面讨论的所有技巧之后,这是拯救我一天的方法。 非常感谢!

升级到 0.63.3 终于为我工作了

就我而言,以前这个上传表单代码工作正常:

form.append('file', {
    uri: file,
    type: filetype,
    name: filename,
})

然后我确实安装了一些其他依赖项,然后它返回网络错误。
所以我不得不用一个明确的前缀来改变类型:

form.append('file', {
    uri: file,
    type: 'audio/' + filetype,
    name: filename,
})

RN 63.3 已修复此问题。 有用!

升级到 63.3 也为我解决了

没有..

RN 63.3 的工作原理基本上是因为它的鳍状肢版本使用 0.54.0。
如果 RN 63.3 仍然无法正常工作,我们应该检查
安卓:
android/gradle.properties 文件中的 FLIPPER_VERSION
IOS:
吊舱安装--repo-update

我正在使用 RN 0.63.3 并将 FLIPPER_VERSION 更新为 0.54.0,但它仍然无法正常工作。 还有其他可用的解决方案吗?

做到了,不是因为脚蹼版本,我使用的是 react -native 0.62.2 和脚蹼版本:0.33.1,注释掉 android/app/src/debug/java/com/maxyride/app/ 中的第 43 行drivers/ReactNativeFlipper.java 并确保正确指定了上传的类型,

我们应该使用这个工具升级到 RN 63.3。 确保每个合并都是正确的。
https://react-native-community.github.io/upgrade-helper/

解决了!
更改 package.json 中 react navite 的版本:
“反应原生”:“0.63.3”
在安卓上:
安卓/gradle.properties
更改鳍状肢版本:
FLIPPER_VERSION=0.54.0
之后,在设备上卸载该应用程序并再次运行该项目。 :)
IOS步骤:
https://react-native-community.github.io/upgrade-helper/ (选择RN最新版本或使用0.63.3即可)

也许这会拯救一个人。 任何网络请求都发生了类似的错误(不要上传文件!!!)。 就我而言,问题出在我的 https 服务器的 ssl 证书中。 过期证书的期限,这就是错误的原因。

注册护士:0.61.5

我尝试了该线程中建议的所有内容,并到处寻找建议,但一无所获。 终于,我意识到了这个问题。 也许它会帮助别人。

这实际上是我的错......我在子组件中调用图像选择器。 用户选择了那里的图像。 单击保存,这会将它们返回到上一个组件。 他们将填写一份表格,并在他们完成表格后上传图片。

问题是,在子组件中,我调用ImagePicker.clear() 。 它有点浆果,所以我没有马上看到它。 我得到了与其他人一样的“网络错误无法读取 uri 的文件”,所以我认为对于我的具体情况,我非常误导认为还有其他问题正在发生。

我想好在我最终将我的 react native 版本、flipper 和 Gradle 升级到了最新版本。 所以就是这样。 另一方面,我为此损失了 3 天。 编程很奇怪。

如果有人在 RN 0.62 或更高版本中仍然遇到问题,解决方案是:
您必须提供要上传的媒体的 uri、名称和类型。

formData.append('media_incident', {
          uri: image.path,
          type: image.mime,
          name: 'filename.jpg',
        });

然后转到第 43 行并注释此行:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
在 android/app/src/debug/java/com/“项目名称”/ReactNativeFlipper.java
我花了将近 8 个小时来挖掘错误的解决方案。

在尝试了上面讨论的所有技巧之后,这是拯救我一天的方法。 非常感谢!

不工作

被互联网上的一些帖子误导,该帖子指出在将其设置为表单数据的 URI 之前,应删除 android 路径上的file://部分。 按原样使用路径并删除上面提到的builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));对我来说适用于 android 和 ios 的 react 版本 0.62.2

仍然有问题,使用 RN 0.63.3 脚蹼 0.54.0,上传照片正常,但上传视频时出现网络错误,使用@murilokrugner说的另一种方法,因为我的截止日期也很短

仍然有问题,使用 RN 0.63.3 脚蹼 0.54.0,上传照片正常,但上传视频时出现网络错误,使用@murilokrugner说的另一种方法,因为我的截止日期也很短

对于你们,如果你们仍然有这个问题,我有简单的解决方案:

  1. 按照他们的说明安装 rn-fetch-blob https://github.com/joltup/rn-fetch-blob
  2. 然后按照此说明https://github.com/joltup/rn-fetch-blob#multipartform -data-example-post-form-data-with-file-and-data

我的运行良好

@abumostafa你是个传奇。 太感谢了。

使用 0.63.3 和最新的鳍状肢仍然面临这个问题的人 - 将 fetch 更改为 XMLHttpRequest。 工作得很好。

仍然面临同样的问题
注册护士 0.63.3
脚蹼 0.54.0

我在 android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java 中注释掉了第 43 行

仍然是同样的问题,我尝试了几乎所有不起作用的方法。

分享我的解决方案是使用 base64 中的相机进行解码,然后以该格式将其发送到服务器上。 我完全失望的是,在 2020 年,开发人员推广的一些微小而简单的功能,只是在……几年内根本不起作用。

TLDR:任何人在发送文件时遇到问题,请尝试转换为 base64 并发送。

此页面是否有帮助?
0 / 5 - 0 等级