如何在React和NodeJS项目中获取Cloudinary上传后的媒体资源URL

后端Node.js 实现逻辑 #

• 先确认已安装Cloudinary官方SDK，未安装可执行命令：npm install cloudinary
• Cloudinary上传请求执行成功后，返回的响应对象中secure_url字段就是HTTPS协议的公开图片访问地址，另外返回的public_id字段可用于后续图片删除、样式调整等管理操作，建议同步存储到数据库。

以下是Express框架下的实现示例：

const cloudinary = require('cloudinary').v2;
const ImageModel = require('./models/ImageModel'); // 替换为你的数据库模型文件路径

// Cloudinary配置，敏感参数建议存放到环境变量中，禁止硬编码
cloudinary.config({
  cloud_name: process.env.CLOUDINARY_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET
});

// 图片上传接口处理逻辑
const uploadHandler = async (req, res) => {
  try {
    // 上传图片到Cloudinary，req.file.path为本地临时文件路径，流式上传可替换为upload_stream方法
    const uploadResult = await cloudinary.uploader.upload(req.file.path, {
      folder: 'project-images' // 可选参数，指定Cloudinary中的存储目录
    });

    // 提取所需字段存储到数据库，以MongoDB为例，其他数据库逻辑一致
    const savedRecord = await ImageModel.create({
      image_url: uploadResult.secure_url,
      cloudinary_public_id: uploadResult.public_id,
      // 补充其他业务字段，比如上传用户ID、图片描述等
    });

    // 返回结果给前端
    res.status(200).json({
      success: true,
      imageUrl: uploadResult.secure_url
    });
  } catch (err) {
    res.status(500).json({
      success: false,
      message: '上传失败'
    });
  }
}

前端React 补充逻辑 #

如果采用前端直传Cloudinary的方案，不需要走后端中转的话，Cloudinary前端SDK上传成功后的回调参数中同样可以获取到secure_url字段，直接将该字段通过接口传给后端做数据库存储即可。
前端调用后端上传接口的示例代码：

const uploadImage = async (file) => {
  const formData = new FormData();
  formData.append('image', file);
  try {
    const res = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });
    const result = await res.json();
    if(result.success) {
      // 拿到图片URL可用于前端展示、表单提交等后续操作
      console.log('图片访问地址：', result.imageUrl)
    }
  } catch (err) {
    console.error('上传错误：', err)
  }
}

内容的提问来源于stack exchange，提问作者Jeffrey Matthew