React前端如何实现Cloudinary大文件直传？排除Widget与JQuery方案

方案1：直接调用Cloudinary未签名分片上传API，自行实现分片逻辑 #

Cloudinary原生支持未签名的分片上传，无需依赖任何SDK，你可以直接通过浏览器的fetch或axios实现，步骤如下：

1. 初始化分片上传，获取upload_id
   向Cloudinary API发起POST请求，拿到用于标识本次上传的upload_id：

   const initUpload = async (cloudName, apiKey, file) => {
     const formData = new FormData();
     formData.append('upload_type', 'chunked');
     formData.append('unsigned', 'true');
     formData.append('api_key', apiKey);
     formData.append('public_id', 'your-file-id'); // 可选，自定义文件ID
     formData.append('file', file.name); // 仅传文件名，不用传整个文件
   
     const response = await fetch(`https://api.cloudinary.com/v1_1/${cloudName}/upload`, {
       method: 'POST',
       body: formData
     });
     return response.json(); // 返回结果包含upload_id
   };
   

2. 分片上传文件块
   使用File.slice()切割文件，逐个上传分片，注意保持chunk_size统一（建议用Cloudinary默认的5MB）：

   const uploadChunk = async (cloudName, apiKey, uploadId, chunk, index, totalChunks) => {
     const formData = new FormData();
     formData.append('upload_id', uploadId);
     formData.append('chunk_index', index);
     formData.append('unsigned', 'true');
     formData.append('api_key', apiKey);
     formData.append('file', chunk);
   
     const response = await fetch(`https://api.cloudinary.com/v1_1/${cloudName}/upload`, {
       method: 'PUT',
       body: formData
     });
     return response.json();
   };
   
   // 在React组件中调用的示例
   const handleChunkUpload = async (file, cloudName, apiKey) => {
     const chunkSize = 5 * 1024 * 1024; // 5MB分片
     const totalChunks = Math.ceil(file.size / chunkSize);
     const { upload_id } = await initUpload(cloudName, apiKey, file);
   
     for (let i = 0; i < totalChunks; i++) {
       const start = i * chunkSize;
       const end = Math.min(start + chunkSize, file.size);
       const chunk = file.slice(start, end);
       await uploadChunk(cloudName, apiKey, upload_id, chunk, i, totalChunks);
     }
   };
   

3. 完成上传，合并分片
   所有分片上传完成后，发起最终合并请求：

   const finalizeUpload = async (cloudName, apiKey, uploadId) => {
     const formData = new FormData();
     formData.append('upload_id', uploadId);
     formData.append('unsigned', 'true');
     formData.append('api_key', apiKey);
     formData.append('finalize', 'true');
   
     const response = await fetch(`https://api.cloudinary.com/v1_1/${cloudName}/upload`, {
       method: 'POST',
       body: formData
     });
     return response.json(); // 返回最终的文件信息
   };
   

方案2：移植Node SDK分片逻辑到浏览器 #

Node SDK的upload_large_stream核心逻辑是分片切割、顺序上传、合并，你可以提取这部分逻辑，替换成浏览器兼容的API：

• 放弃Node的stream依赖，直接用File.slice()处理文件分片
• 参考SDK中的分片大小计算、重试机制（比如上传失败时重新上传分片）
• 用fetch替代Node的http模块发起请求

这种方式能复用Cloudinary官方的分片策略，避免自己造轮子出错，你可以去Cloudinary Node SDK的仓库查看upload_large_stream的源码，提取关键逻辑适配浏览器环境。

方案3：搭建轻量后端签名服务（不中转文件） #

如果未签名上传的权限控制不符合你的需求，可以搭建一个极简后端，仅负责生成Cloudinary上传签名，文件依然从浏览器直接传到Cloudinary：

1. 前端向后端发送请求，携带文件名、文件大小等信息
2. 后端用Cloudinary Node SDK生成分片上传所需的签名（包括upload_id的签名，或每个分片的签名）
3. 前端拿到签名后，用签名参数调用Cloudinary的分片上传API，完成文件上传

这种方式既避免了文件中转，又能利用Cloudinary的签名机制做权限控制，后端代码非常轻量，仅处理签名逻辑即可。

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