使用 axios 发送文件时反应本机出现网络错误

Question

我正在使用 api 平台创建端点来处理图像上传。我的 api 需要文件类型才能发出 post 请求。这是使用 post man :

的 post 请求示例

我想使用 react native 处理通过 axios 发送图像。

我创建了一个这样的 post 请求：

 this.setState({
      avatarSource: source,
    });

    console.log(this.state.avatarSource.uri);
    const data = new FormData();

    data.append('file', {
      uri: this.state.avatarSource.uri,
      // show full image path in my device
      //  file:///storage/emulated/0/Pictures/image-c40b64fc-6d74-46a7-9016-191aff3740dd.jpg
    });

    axios
      .post(`${API.URL}/media_objects`, data, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
      .then((resp) => console.log(resp))
      .catch((err) => console.log(err.message));
  }
});

我正在将 phone 中的图像的完整路径发送到 api，但我得到了 "Network Error"

Answer 1

我通过在 ReactNativeFlipper.java 中评论这一行解决了这个问题：

  NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
  NetworkingModule.setCustomClientBuilder(
      new NetworkingModule.CustomClientBuilder() {
        @Override
        public void apply(OkHttpClient.Builder builder) {
          // builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); // add comment here and build android 
        }
      });
  client.addPlugin(networkFlipperPlugin);
  client.start();

使用 axios 发送文件时反应本机出现网络错误

react native getting network error when sending files with axios

file-upload

react-native

axios

api-platform.com