是否可通过Cloudinary实现多张图片上传及裁剪（Javascript/React-JS环境）

完全可以实现，Cloudinary 原生支持 JavaScript/React 环境下的多张图片批量上传、裁剪需求，以下是可直接落地的实现方案：

前置准备 #

• 先在 Cloudinary 控制台获取你的 Cloud Name，生产环境建议使用签名上传模式，注意 API Secret 仅可在后端存储使用，不要暴露在前端代码中
• 安装依赖：
  官方SDK安装命令：npm install @cloudinary/react @cloudinary/url-gen
  如需自定义拖拽上传组件，可额外安装：npm install react-dropzone

批量上传实现 #

方案1：使用 Cloudinary 官方 Upload Widget（开发效率最高） #

不需要自行开发上传逻辑，组件原生支持多文件选择、拖拽、进度提示、错误处理等能力：

import { useEffect } from 'react';

const BatchUploader = () => {
  useEffect(() => {
    const uploadWidget = window.cloudinary.createUploadWidget(
      {
        cloudName: '替换为你的Cloud Name',
        uploadPreset: '替换为你在控制台创建的上传预设（无签名上传需先在控制台开启对应权限）',
        multiple: true, // 开启批量上传
        maxFiles: 15, // 单次最多上传数量可自定义
        resourceType: 'image',
      },
      (error, result) => {
        if (result.event === 'success') {
          // 上传成功后返回结果包含 public_id、原始URL等字段，可自行存储
          console.log('单张上传成功：', result.info);
        } else if (result.event === 'queues-end') {
          // 所有队列文件上传完成触发
          console.log('批量上传全部完成');
        }
      }
    );

    document.getElementById('upload-trigger').addEventListener('click', () => {
      uploadWidget.open();
    });
  }, []);

  return <button id="upload-trigger">批量上传图片</button>;
};

export default BatchUploader;

方案2：自定义上传逻辑（适配自定义UI需求） #

如果需要完全自主控制上传交互，可配合 react-dropzone 调用上传接口实现批量处理：

import { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';

const CustomBatchUpload = () => {
  const [uploading, setUploading] = useState(false);
  const [uploadedList, setUploadedList] = useState([]);

  const onDrop = useCallback(async (acceptedFiles) => {
    setUploading(true);
    // 批量并行上传
    const uploadTasks = acceptedFiles.map((file) => {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('upload_preset', '替换为你的上传预设');
      // 签名上传模式需额外添加 timestamp、signature、api_key 参数
      return fetch('https://api.cloudinary.com/v1_1/替换为你的Cloud Name/image/upload', {
        method: 'POST',
        body: formData,
      }).then((res) => res.json());
    });

    const results = await Promise.all(uploadTasks);
    setUploadedList(results.filter((item) => item.public_id));
    setUploading(false);
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: { 'image/*': [] },
    multiple: true,
  });

  return (
    <div {...getRootProps()} style={{ border: '2px dashed #eee', padding: '30px' }}>
      <input {...getInputProps()} />
      {isDragActive ? <p>释放图片即可开始上传</p> : <p>拖拽多张图片到此处，或点击选择文件</p>}
      {uploading && <p>批量上传中，请稍候...</p>}
      {uploadedList.length > 0 && <p>已成功上传 {uploadedList.length} 张图片</p>}
    </div>
  );
};

export default CustomBatchUpload;

裁剪功能实现 #

Cloudinary 支持两种裁剪模式，可根据业务场景选择：

• 上传时自动裁剪：适合所有上传图片需要统一尺寸的场景，上传时添加转换参数即可，上传后返回的图片直接是裁剪完成的资源：
  上传时在 formData 中添加参数：formData.append('transformation', 'w_800,h_800,c_fill,g_auto')，该配置代表自动居中裁剪为800*800的正方形。
• 访问时动态裁剪：适合同一张图片需要多尺寸展示的场景，上传时不需要处理，展示时按需生成裁剪后的URL，CDN会自动缓存生成后的资源：

import { Cloudinary } from "@cloudinary/url-gen";
import { AdvancedImage } from "@cloudinary/react";
import { fill } from "@cloudinary/url-gen/actions/resize";

const CroppedImage = ({ publicId }) => {
  const cldInstance = new Cloudinary({ cloud: { cloudName: '替换为你的Cloud Name' } });
  // 按需自定义裁剪规则，示例为裁剪为400*400正方形
  const croppedImg = cldInstance.image(publicId).resize(fill().width(400).height(400));
  return <AdvancedImage cldImg={croppedImg} alt="裁剪后的图片" />;
};

export default CroppedImage;

内容的提问来源于stack exchange，提问作者F-Developer