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

Question

我試圖使用上傳小文件的反應，本機圖像作物picke [R它的正常工作，但是當我試圖上傳使用大視頻/圖像文件的反應，本機圖像作物選擇器我得到網絡錯誤。

注意：后端工作正常，我可以使用 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

請檢查您是否在后端為服務器設置了 client_max_body_size。 對於 Nginx：- /etc/nginx/proxy.conf

client_max_body_size 100M; 

更多信息： 在 AWS Elastic Beanstalk 上的 Nginx conf 中增加 client_max_body_size

Answer 2

確保您沒有在代碼中定義默認超時，例如：

.defaults.timeout = x

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

Answer 3

我通過直接從 react-native-image-crop-picker 示例應用程序存儲庫這里提出了我的建議：

1. 設置您在相機上錄制的內容的最大高度和寬度。 例子 ：

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

2. 壓縮您選擇的圖像的質量

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

3. 當您在進一步處理響應之前設置最大大小不應超過例如 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 }