Cloudinary 上传图像不起作用（反应本机和节点答案

【问题标题】：Cloudinary upload image not working (react native and nodesCloudinary 上传图像不起作用（反应本机和节点
【发布时间】：2021-02-20 07:48:08
【问题描述】：

我正在尝试将我的 react 本机应用程序中的图像上传到 nodejs 和 cloudinary 云，但它不适合我。那是我的 react-native 代码：

const App = () => {
  const [profileImageSource ,setProfileImageSource] = useState(require('./images/profilePic.png'));
  const [imageData, setImageData] = useState("");
  const [okay, setOkay] = useState(false);

  const config = {
    withCredentials: true,
    baseURL: 'http://localhost:3000/',
    headers: {
      "Content-Type": "application/json",
    },
  };
  const handleProfileImage = () => {
      const options = {
        title: 'Select photo',
        base64: true
      };

      ImagePicker.showImagePicker(options, (res) => {
        if(res.didCancel){
        }
        else if(res.error){
        }
        else{
          const image = {data: res.data};

          axios
          .post('/clients/upload-image', {
            data: JSON.stringify({image})
          },
          config
        )
          .then((res) => console.log("ok"))
          .catch((err) => alert(err));
        }
      })
    }

这是我的nodejs代码：

require('dotenv').config();

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

//Cloudinary configurations
cloudinary.config({
    cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET
});

app.post('/clients/upload-image', (req, res) => {
    const imageStr = req.body.data;
    const uploadedResponse = 
        cloudinary
        .uploader
        .upload(imageStr, {
            upload_preset: 'user',
        })
        .then((uploadedResponse) => console.log(uploadedResponse))
        .catch((err) => console.log("error"));
}

我哪里错了？我不断收到错误，图片没有上传到云端

【问题讨论】：

标签： node.js react-native cloudinary react-native-image-picker

【解决方案1】：

您能分享您收到的错误消息吗？另外，您能否确认后端正确接收了imageStr（又名req.body.data）？（也许在上传之前打印出来？）

【讨论】：

【解决方案2】：

这是一个简单的文件上传和使用强大作为你的bodyParser它会让你的生活变得轻松使用强大的，同样可以证明multer现在归结为偏好

所以首先我建议您在您的客户端中也使用 JavaScript FormData(built-in lib)

因此，当您将图片发送到服务器时，您将如何处理如下：

const uploadPicture = ()=>{

    const data = new FormData();
    
    data.append('image', file)// So 'image' is the key and **file** now this is the file uploaded in user that you have in state
    
    axios.post(url, data).then(res=>{
        
         console.log(res)
    
    }).catch(err=>{

        console.log(err)

    })

}

现在如何处理事情是后端

首先安装npm i formidable或yarn add formidable
完成后，您就可以出发了。

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

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

router.post('/api/upload', (req, res)=>{

    const form = new Formidable.IncomingForm();//Here you initialze your formidable instance
    form.parse(req, (error, fields, files)=>{
      
       const {image} = files //So due to in our request we sent a **file** which is an image then formidable parsed that request and placed file received from client in **files** that you see in callback function so now we de-structure it by key that we set in client

        cloudinary.uploader.upload(image.path, {folder:'here you can specify folder you want'}, (err, results)=>{

            if (err) return console.log(err)
            const image_url = results.secure_url
        }) 

    })

})

现在您上传了您的图片

如果这对您没有意义：这是一个无耻的插件

在 YouTube 上查看我的频道，我已经介绍了如何使用 cloudinary
链接：https://youtu.be/mlu-tbr2uUk

【讨论】：