无法将照片从 React Native 发送到 Cloudinary答案

【问题标题】：Unable to send a photo from React Native to Cloudinary无法将照片从 React Native 发送到 Cloudinary
【发布时间】：2020-03-16 21:04:56
【问题描述】：

我正在尝试从我的 React Native 应用程序将图像上传到 Cloudinary，但我收到“400 Bad Request”，说我发送的图像是“”x-cld-error”：“不支持的源 URL ”。

ImageUpload.js


    const pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1
        })

        if (!result.cancelled) {
            setImageSource(result.uri);
        }
    }

我目前正在使用来自expo-image-picker 的ImagePicker。我正在使用从上面获得的imageSource 并将其附加到数据中，然后再将其发送到 Cloudinary。 result.uri 显示来自 iOS 模拟器的图片的 URL。

CreatePost.js

    const uploadFile = async () => {
        const data = new FormData();
        data.append('file', imageSource);
        data.append('upload_preset', 'test_folder')

        const res = await fetch('https://api.cloudinary.com/v1_1/{my_cloudinary}/image/upload', {
          method: 'POST',
          body: data,
          headers: {
            Accept: 'application/json',
            'Content-Type': 'multipart/form-data',
          },
        })

        const file = await res.json()
        setImage(file.secure_url)
        setLargeImage(file.eager[0].secure_url)
    }

当我console.log res时，显示状态为400。

【问题讨论】：

您能否在执行上传请求到 Cloudinary 的同一函数中记录并包含 imageSource 的值？我问这是因为当返回此错误时，它包括所使用源的开始，但在你的问题中，这不包括在内。例如，Unsupported source URL: data:;base64, 或 Unsupported source URL: Object(...。

标签： reactjs react-native expo cloudinary

【解决方案1】：

您可以尝试使用 ajax。例如这里：

<h1>Upload to Cloudinary with FormData</h1>
<div>
<p>

Set your cloud name in the API URL in the code:  "https://api.cloudinary.com/v1_1/<strong>&lt;cloud&nbsp;name&gt;</strong>/image/upload" before running the example.
</p>
</div>
<form action="" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
  <fieldset>
    <legend>Upload example</legend>
    <p>
      <label for="upload_preset">Unsigned upload Preset: <input type="text" name="upload_preset">(set it <a href="https://cloudinary.com/console/settings/upload#upload_presets">here</a>)</label>
    </p>
    <p>
      <label >Select your photo:
      <input type="file" name="file"></label>
    </p>
    
    <p>
      <input type="submit" value="Submit" />
    </p>
    <img id="uploaded">
    <div id="results"></div>
  </fieldset>
</form>

在此处输入代码https://jsfiddle.net/shirlymanor/s1hou7zr/

【讨论】：