从React Native成功上传到Cloudinary的图像不会返回URL

如何解决从React Native成功上传到Cloudinary的图像不会返回URL

我正在尝试将图像从React Native应用上传到Cloudinary。 该图像显示在仪表板上，但是我没有找到secure_url。

这是我的代码：

  async uploadImage(photo: ImagePickerResponse,id: string): Promise<string> {
    return new Promise<string>(async (resolve,reject) => {
      const uploadPreset = 'bbbbbb';
      const cloudName = 'aaaaa';

      const body = new FormData();
      const uri: string =
        Platform.OS === 'android' ? photo.uri : photo.uri.replace('file://','');
      const type = photo.type;
      const name = `eMia${id}.jpeg`;
      const file = {uri,type,name};
      body.append('file',file);
      body.append('upload_preset',uploadPreset);
      body.append('cloud_name',cloudName);
      const url = `https://api.cloudinary.com/v1_1/${cloudName}/image/upload`;

      fetch(url,{method: 'POST',body})
        .then((res) => {
          // I don't have Body here so i don't have the image url :(
          console.log(res);
          res.json();
        })
        .then((json) => {
          console.log(json);
          const url = json.secure_url;
          console.log(url);
          resolve(url);
        })
        .catch((err) => {
          reject(err);
        });
    });
  }

响应：

解决方法

能否请您尝试以下代码：

npm ls discord.js

,

React Native应用程序将照片上传到Cloudinary服务器并获取照片的链接。 来自Image Picker的文件被上传到Cloudinary，分两个步骤。第一步，将照片上传到应用服务器：

import {DBStorageInteractor} from '../interfaces';
import {BASE_URL} from '../../../config/constants';
import ImageResizer from 'react-native-image-resizer';
import {ImagePickerResponse} from 'react-native-image-picker';

    
  async uploadImage(photo: ImagePickerResponse,id: string): Promise<string> {
    return new Promise<string>(async (resolve,reject) => {
      if (!photo) {
        reject(Error('Photo is not presented'));
        return;
      }
      this.getBody(photo,id)
        .then((body) => {
          const headers = {
            Accept: 'application/json','Content-Type': 'application/json',};
          const options = {
            method: 'POST',body: body,headers: headers,};
          fetch(`${BASE_URL()}/api/images/upload`,options)
            .then((response) => response.json())
            .then((response) => {
              const secureUrl = response.secure_url;
              console.log('Uploaded successfully. Url=',secureUrl);
              resolve(secureUrl);
            })
            .catch((error) => {
              const message = `Failed uploading. Error=${error}`;
              console.log(message);
              reject(Error(message));
            });
        })
        .catch((error) => {
          reject(error);
        });
    });
  }

  getBody(photo: ImagePickerResponse,id: string): Promise<string> {
    return new Promise((resolve,reject) => {
      if (photo.fileSize < 100000) {
        resolve(
          JSON.stringify({
            img: photo.data,name: `eMia${id}.${this.getFileExtension(photo.uri)}`,})
        );
      } else {
        ImageResizer.createResizedImage(photo.uri,400,'JPEG',80)
          .then(({uri}) => {
            RNFS.readFile(uri,'base64')
              .then((data) => {
                resolve(
                  JSON.stringify({
                    img: data,})
                );
              })
              .catch((error) => {
                reject(error);
              });
          })
          .catch((error) => {
            reject(error);
          });
      }
    });
  }

  getFileExtension(filename) {
    return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
  }

图片。 1.该应用程序的客户端将照片从Image Picker上传到服务器端，并获得该照片的链接。

在第二步，服务器端（在NodeJS上）处理两个步骤的请求。它将文件图像从请求写入一个临时目录，然后将其上传到Cloudinary服务器：

const {Router} = require('express')
const router = Router()
const cloudinary = require('cloudinary').v2;
const fs = require('fs')
// /api/images/upload
router.post('/upload',async (req,res) => {
    try {
      const file = req.body.img;
      const name = req.body.name;
      const path = `tmp/${name}`;
      // Write received fire in temporary folder
      fs.writeFile(path,file,'base64',(err) => {
        if (err) {
          console.log(err);
          throw err
        }
        // Upload file to the Cloudinary server
        cloudinary.uploader.upload(path)
          .then((results) => {
            res.status(200).json(results)
          })
          .catch((error) => {
            res.status(400).json(error)
          });
      })
    } catch (error) {
      res.status(500).json(error)
    }
  }
)

图片。 2.在NodeJS服务器上处理请求'/ upload'。

在服务器端配置Cloudinary：

const cloudinary = require('cloudinary').v2;

require('dotenv').config();

cloudinary.config({
  cloud_name: process.env.cloud_name,api_key: process.env.api_key,api_secret: process.env.api_secret,});

.env文件（位于项目的根目录）包含以下参数：

cloud_name=<Cloudinary cloud name>
api_key=<API key from the Cloudinary project settings>
api_secret=<API secret from the Cloudinary project settings>