缺少请求的请求令牌

问题描述

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

在请求正文FormData附加图像时

试过的代码

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

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

试过的代码

传递没有“file://”的文件 url 联系人缩略图路径

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

试过的代码

使用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'
         })
     }
}

要求

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)
})

此问题已在 0.63.3 中修复 ?

**For IOS** in 
node_modules/react-native/Libraries/Image/RCTLocalAssetImageLoader.mm   file

**Replace Below** 

 - -(RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
                                               size:(CGSize)size
                                              scale:(CGFloat)scale
                                         resizeMode:(RCTResizeMode)resizeMode
                                    progressHandler:(RCTImageLoaderProgressBlock)progressHandler
                                 partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
                                  completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
{
  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 nil;
}

**With**



 - -(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);
   };
 }

This..

Like and Love , if it work 

我有同样的问题，可以在我的本机项目中的 iPhone 7 之一上完美重现。 这很奇怪，但另一部 iPhone 7 与所有 Android 设备一样完美运行。

我的代码：

formdata.append("file", {uri: photo.uri, name: name_img, type: 'image/jpeg' });

axios({
   url: `${API}${'/upload'}`,
   method: 'post',
   headers: {
      'Authorization': 'Basic ' + auth_token,
      'Content-Type':'application/x-www-form-urlencoded'
   },
   data: formdata
}).then(response => this.saveRoute())
  .catch(err => {         
     this.props.errorMessage({message: err})
  }
})

我调查的几件事：

• 我无法在调试模式下捕获它（在异步调用中接缝错误？）
• 我无法用try-catch语句捕获它，但它在 Axios 调用中发生了接缝。

因此，我尝试使用 Timeout 并且能够在 Axios call 之前使用300ms 超时使其完全无法重现。

formdata.append("file", {uri: photo.uri, name: name_img, type: 'image/jpeg' });
    setTimeout(() =>
      axios({
        url: `${API}${'/upload'}`,
        method: 'post',
        headers: {
          'Authorization': 'Basic ' + auth_token,
          'Content-Type':'application/x-www-form-urlencoded'
        },
    data: formdata
  }).then(response => this.saveRoute())
    .catch(err => {
        this.props.errorMessage({message: err})
      }
    })
  , 300);

我知道这是一种解决方法，但可能会帮助其他人了解该问题以进行更深入的研究。

我使用rn-fetch-blob临时修复了这个问题，但这个问题存在于 0.63.2 版本中，我不想修补 node_modules 反应原生图像库。

要发送文件，您必须创建一个 FormData 并将您的文件附加到其中。 见前： :

我找到了解决方案。 发布请求时只需延迟即可。

let options = {}

options.headers = headers
options.method = 'POST'

let url = {SERVER_URL}

options.body = new FormData();
for (let key in data) {
   options.body.append(key, data[key]);
}
setTimeout(() => {
  fetch(url, options)
    .then((response) => response.json())
    .then((responseJson) => {
         resolve(responseJson);
     })
     .catch((error) => {
         let errParam = {}
         errParam.errMsg = error.toString()
         console.log(errParam)
         resolve(errParam);
    })
}, 1000);

将 React Native 更新到版本 0.63.3 时已修复错误