从电话簿获取所有联系人并上传到服务器,但出现以下错误.

在请求正文FormData中附加图像

enter image description here

Tried code

传递文件url联系人缩略图路径

const path = con.thumbnailPath
body.append('image', {
     uri: path,
     type: 'image/jpeg',
     name: 'photo.jpg',
     type: 'multipart/form-data'
})

Tried code

传递文件url联系人缩略图路径 without "file://"

const path = con.thumbnailPath.replace('file://', '')
body.append('image', {
     uri: path,
     type: 'image/jpeg',
     name: 'photo.jpg',
     type: 'multipart/form-data'
})

Tried code

使用react-native-fs判断文件是否存在于路径上

if (con.thumbnailPath != '') {
     let isExist = RNFS.exists(con.thumbnailPath)
     if (isExist) {
         const path = con.thumbnailPath.replace('file://', '')
         console.log("Exist", path)
         body.append('image', {
             uri: path,
             type: 'image/jpeg',
             name: 'photo.jpg',
             type: 'multipart/form-data'
         })
     }
}

Request

fetch(url, {
    method: 'POST',
    headers: {
        'Authorization': token,
        'token': token
    },
    body: params 
})
.then((res) => res.json())
.then((json) => {
    console.log("RESPONSE:- ", json)
    if (json.response[0].status == 'false') {
        let msg = json.response[0].response_msg
        callback(new Error(msg), json.response[0])
    }
    else {
        callback(null, json.response[0])
    }
})
.catch((err) => {
    console.log(err)
    callback(err, null)
})

推荐答案

这些问题来自react-native@0.63.2的内部缺陷.

一个快速的解决方案是恢复这个提交:https://github.com/facebook/react-native/commit/31980094107ed37f8de70972dbcc319cc9a26339#diff-9a034658197479288c4d346a0eb4d98c

node_modules年内手动恢复此提交后,重新编译应用程序,图像上传将正常工作,不会出现任何问题.

/Libraries/Image/RCTLocalAssetImageLoader.mm中的功能loadImageForURL替换为以下内容:

 - (RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
                                           size:(CGSize)size
                                          scale:(CGFloat)scale
                                     resizeMode:(RCTResizeMode)resizeMode
                                progressHandler:(RCTImageLoaderProgressBlock)progressHandler
                             partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
                              completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
 {
   __block auto cancelled = std::make_shared<std::atomic<bool>>(false);
   RCTExecuteOnMainQueue(^{
     if (cancelled->load()) {
       return;
     }

     UIImage *image = RCTImageFromLocalAssetURL(imageURL);
     if (image) {
       if (progressHandler) {
         progressHandler(1, 1);
       }
       completionHandler(nil, image);
     } else {
       NSString *message = [NSString stringWithFormat:@"Could not find image %@", imageURL];
       RCTLogWarn(@"%@", message);
       completionHandler(RCTErrorWithMessage(message), nil);
     }
   });

   return ^{
     cancelled->store(true);
   };
 }

React-native相关问答推荐

react 本机 TextInput 将其他元素移出屏幕

无法设置文本输入参考

React Native:如何以编程方式对图像进行黑白过滤?

滚动到具有可变元素大小的 FlatList 中的某些索引的有效方法

react native 中 componentDidMount 和 componentDidUpdate 有什么区别

为了回调 URL 的目的,在 Expo 中运行的 React Native 元素的 info.plist 在哪里?

如何在 React Native 中获取 TextInput 相对于其父级或屏幕的光标位置

你能在 Ubuntu 上构建 React Native 应用程序(Android 应用程序)吗?

React native expection java.lang.UnsatisfiedLinkError: dlopen failed: "/data/data/{package}/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit

将 react-native 元素Bundle 为 iOS 框架或 (.aar) Android 库

加载远程图像失败后加载本map像

如何在react-native矢量图标中从多个文件导入图标?

如何将 BuildConfig 值传递给依赖模块?

在 react-native 中设置动态 'initialRouteName'

React-native:图像未显示在 android 设备中,但在模拟器中完美显示

如何知道 FlatList 中的滚动状态?

使用 typescript react-native - 如何使用来自 @react-navigation/native 的 useRoute 和 typescript

React Native:如何将 的高度和宽度设置为 容器?

在 ReactNative 中单击按钮时如何获取 TextInput 中的值

如何从react-native应用程序打开外部应用程序?