react-native 上传图片之Network reques

2020-08-08  本文已影响0人  YQSummer

react--native环境:0.63.0
插件 import ImagePicker from 'react-native-image-picker';

Android使用fetch/xhr 请求上传图片一直出现 Network request failed,进行其他正常请求都没问题,查了很多问题找到了解决方案,如下:
在android文件中找到对应的文件,修改


image.png

文件路径:

android/app/src/debug/java/com/xxx/ReactNativeFlipper.java

打开文件,找到第43行,将其注释掉


image.png

(正式环境)当然在打包时您可能还需要做一些其他的改动
找到对应文件

android\app\src\main\java\com\xxxxx\MainApplication.java

打开文件找到onCreate方法,将其中的代码注释掉

initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
image.png

改完android文件后记得重新运行项目哦。

附上上传的图片代码

   ImagePicker.launchImageLibrary(options, (response) => {  //相册                          
                if (response.didCancel) {
                    console.log('User cancelled image picker');
                } else if (response.error) {
                    console.log('ImagePicker Error: ', response.error);
                } else {
                    let uri; 
                    if(Platform.OS === 'android'){
                        uri = response.uri
                    }else {
                        uri = response.uri.replace('file://', '')
                    }
                    let body  = new FormData();
                
                    body.append('file', {
                        uri: uri,
                        size: response.fileSize,
                        type: response.type,
                        name: response.fileName,
                        filename:response.fileName,
                     }); 
                     body.append('type','1')  
                     const headers = { "content-type": "multipart/form-data", "accept": "application/json",'userId':userId }                     
                    return fetch(`${baseUrl}/file/upload`, {
                        method: 'POST',
                        headers,
                        body,
                    })
                    .then((response) => response.json())
                    .then((res) => {}
                })
          }
})

参考文献:https://github.com/facebook/react-native/issues/28551
https://blog.csdn.net/qq_41457238/article/details/107221449

上一篇下一篇

猜你喜欢

热点阅读