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

Question

我正在尝试使用 react-native-image-crop-picker it's working fine but when I tried uploading large video/image file using 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>

Answer 1

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

.defaults.timeout = x

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

Answer 2

我直接从 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（无论你想要什么数字）。我再次在上面link的响应部分获得了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
    }

Answer 3

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

client_max_body_size 100M;

更多：Increasing client_max_body_size in Nginx conf on AWS Elastic Beanstalk

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

How to upload large files using react-native-image-crop-picker

android

file-upload

react-native

react-native-image

react-native-image-picker