在 Cloudinary 上使用 axios 上传 React-Native imagePicker

Posted 2023-03-25

【中文标题】在 Cloudinary 上使用 axios 上传 React-Native imagePicker

【英文标题】：Upload React-Native imagePicker with axios on Cloudinary

【发布时间】：2020-07-25 04:53:02

【问题描述】：

我尝试从 localhost 和 prod 环境中的相机库上传一些图像。我的代码适用于有效的网址，例如：https://res.cloudinary.com/dtdiwoz7o/image/upload/v1586706052/cn-2016-sashaonyshchenko-1920x1920-1510074905_dyfldk.jpg 但是当我传递图像文件路径时，它会返回 400 错误。 这是我的代码和一些日志：

  _avatarClicked = () => 
const options = 
  title: 'Select Photo',
  storageOptions: 
    skipBackup: true,
    path: 'images',
  ,
;
ImagePicker.showImagePicker(options, (response) => 
  if (response.didCancel) 
    return
  
  else if (response.error) 
    return
  
  else 

    let data = 
      file: response.uri,
      upload_preset: "my_preset_name",
    

    axios.post("https://api.cloudinary.com/v1_1/my_cloud_name/image/upload", data)
      .then(res => console.log(res))
      .catch(err => console.log(err))

  
)

我的 repsponse.uri 日志： (file:///Users/clement/Library/Developer/CoreSimulator/Devices/62E85527-A2AC-46CD-B517-E6039F99E056/data/Containers/Data/Application/E218E950-3A1C-40EB-8289-3837EC89FBBB/Documents/images/ 46674162-E32B-4302-B28A-5EF9150206D0.jpg)

我试图用这个'const source'在数据文件中替换它，但它不起作用：

     const source = 
      uri: response.uri,
      type: response.type,
      name: response.fileName,
    

我在 react-native)image-picker 文档中看到并测试了这一点，但我遇到了同样的 400 错误...

 // const source =  uri: 'data:image/jpeg;base64,' + response.data ;

我也尝试 Base64.encode(response.url) 或 Base64.encodeURI(response.url)

拜托，你能帮帮我吗？ 对不起我的英语不好

"react-native": "~0.61.4", "react-native-image-picker": "^2.3.1",

////////////////////////

我找到了解决方案：

  let data = 
  file: 'data:image/jpg;base64,' + response.data,
  upload_preset: "my_preset_name",


axios.post("https://api.cloudinary.com/v1_1/my_cloud_name/image/upload/", data)
  .then(res => console.log(res))
  .catch(err => console.log(err))

【参考方案1】：

好的，我找到了解决方案：

  let data = 
      file: 'data:image/jpg;base64,' + response.data,
      upload_preset: "my_preset_name",
    

    axios.post("https://api.cloudinary.com/v1_1/my_cloud_name/image/upload/", data)
      .then(res => console.log(res))
      .catch(err => console.log(err))