如何使用 react-native-image-crop-picker 上传大文件答案

【问题标题】：How to upload large files using react-native-image-crop-picker如何使用 react-native-image-crop-picker 上传大文件
【发布时间】：2021-12-02 20:28:00
【问题描述】：

我正在尝试使用 react-native-image-crop-picker 上传小文件，它工作正常，但是当我尝试使用 react-native-image-crop-picker 上传大型视频/图像文件时，我遇到了网络错误。

注意：后端工作正常，我可以使用 Postman 上传文件。

只有大文件才会发生这种情况。我可以上传小于 1MB 的文件

代码

   

import ImagePicker from 'react-native-image-crop-picker';
import axios from "axios";

function uploadFile(){

ImagePicker.openCamera({
  mediaType: 'any',
}).then(file=> {

   const body = new FormData();

    body.append('vurl', {
      name: file.fileName,
      type: file.mime,
      uri: Platform.OS === 'ios' ? file.path.replace('file://', '') : file.path,
    });

 
   axios({
      method:"post",
      url:"Server url",
      data:body,
      headers: {
        Accept: 'application/json',
        'Content-Type': "multipart/form-data",
      }
    })
      .then((res) => {
        console.log(JSON.stringify(res));
      })
      .catch((err) => {
        console.log(err.response);
      });

});

}



//calling here

<TouchableOpacity onPress={uploadFile}>
    <Text>upload file</Text>
<TouchableOpacity>

【问题讨论】：

能否附上网络错误信息？

标签： android react-native file-upload react-native-image-picker react-native-image

【解决方案1】：

请检查您是否在服务器后端设置了client_max_body_size。对于 Nginx：- /etc/nginx/proxy.conf

client_max_body_size 100M;

【讨论】：

如果 Nginx 不允许大文件，OP 如何使用 Postman 上传？
Postman 在设置中默认有 50 MB 的文件大小，对于 Nginx，client_max_body_size 的默认值为 1MB。
是的，但是 Postman 请求仍然必须通过默认为 1MB 的 Nginx（在进行此答案中建议的更改之前）。那么 OP 如何声称 注意：后端工作正常我可以使用 Postman 上传文件。 @hemendra-khatik 无论如何，从使用 Nginx 的问题来看，这一点并不明显。
这只是我建议的一个例子。您还可以通过此示例检查“apache”请求正文限制：stackoverflow.com/questions/11686288/…
是的 Nginx 或 Apache 没关系。我无法理解的是，如果请求通过 Postman，为什么 React 会失败？他们都击中了完全相同的后端。因此，如果 Nginx/Apache/serverside 是问题所在，Postman 也会失败。

【解决方案2】：

确保您没有在代码中定义默认超时，例如：

.defaults.timeout = x

https://www.npmjs.com/package/react-native-axios#config-defaults

【讨论】：

【解决方案3】：

我直接从 react-native-image-crop-picker 示例应用程序库 here 中提出了我的建议：

设置您在相机上录制的内容的最大高度和宽度。示例：

ImagePicker.openCamera({
      mediaType: 'any',
      cropping: cropping, 
      width: 500,
      height: 500,
    }).then(file=> {

压缩您选择的图像质量

 ImagePicker.openPicker({
      mediaType: 'any',
      compressImageMaxWidth: 1000,
      compressImageMaxHeight: 1000,
      compressImageQuality: 1, ----> you can set the value between 0 and 1 e.g. 0.6.
    })
    .then(file=> {.....

设置最大尺寸不应超过例如当您在进一步处理之前收到响应时，1MB（您想要的任何数字）。我再次在上面链接的响应部分中获得了 file.size

 ImagePicker.openCamera({
      mediaType: 'any',
    }).then(file=> {
    
       if (file.size > xxx) {
    Alert.alert('File size too large!') 
    //dont forget to import alert from react-native
    }

【讨论】：