Question

我面临一个奇怪的问题。我正在构建一个React Native应用程序，它使用REST API将图像上传到简单的PHP服务器。

当移动应用程序将图像上传到服务器时，上传速度非常慢，甚至50％的时间都会失败，但有时会有效。但这只会发生在我家的WIFI上。如果我断开并使用3G，则上传工作非常顺利。

最后，如果我从我的计算机上传图像，使用完全相同的WIFI连接和基本的HTML表单来执行REST API POST请求，那么它运行得非常好！因此，在手机上使用wifi时上传速度很慢。

我尝试使用fetch API和XMLHttpRequest，两者的行为方式相同。我终于使用XMLHttpRequest来获取进度值。

有关它可能来自哪里的任何想法？这是我使用的上传代码：

const image = await ImagePicker.launchCameraAsync();
const { uri, width, height, base64 } = image;
const splitUri = uri.split('.');
const ext = splitUri[splitUri.length - 1];
const name = `${splitUri[splitUri.length - 2]}.${ext}`;
const jwtToken = await AsyncStorage.getItem('authToken');

const data = new FormData();
data.append('image', {
  uri: uri,
  type: `image/${ext}`,
  name,
});
data.append('authorization', jwtToken);
data.append('section', section);
data.append('width', width);
data.append('height', height);

const request = new XMLHttpRequest();

request.open('POST', 'https://my-website.com/api/add-image.php', true);
request.setRequestHeader('Content-type', 'multipart/form-data');

request.upload.onprogress = e => {
  if (e.lengthComputable) {
    var percentComplete = e.loaded / e.total * 100;
    this.setState({ modalProgress: percentComplete });
  }
};

request.onreadystatechange = e => {
  if (request.readyState !== 4) {
    return;
  }

  if (request.status === 200) {
    console.log('It worked');
      return;
    } else {
    console.log('It failed');
  }
  this.setState({ modalVisible: false });
};

request.send(data);

使用React Native缓慢上传WiFi

0 个答案: