美文网首页
react-native 上传图片之Network reques

react-native 上传图片之Network reques

作者: YQSummer | 来源:发表于2020-08-08 12:08 被阅读0次

    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

    相关文章

      网友评论

          本文标题:react-native 上传图片之Network reques

          本文链接:https://www.haomeiwen.com/subject/glfhdktx.html