如何使用rpldy/drive-uploady在上传至Google Drive前编辑图片？

核心思路 #

先关闭自动上传，待用户完成图片编辑后，将选中的原始文件替换为编辑后的文件，再手动触发上传流程。

具体实现步骤 #

1. 调整DriveUploady基础配置 #

添加autoUpload={false}关闭自动上传，确保文件选中后不会立即上传，同时准备通过hooks获取上传控制能力。

2. 利用rpldy Hooks管控上传流程 #

通过useUploady hook获取uploader实例、getPendingFiles、updateFile等方法，用于监听文件选择事件、管理待上传文件、触发上传动作。

3. 集成图片编辑器 #

实现或引入图片编辑组件，加载选中的图片供用户编辑，编辑完成后生成包含修改内容的新Blob/File对象。

4. 替换文件并触发上传 #

将编辑后的文件替换rpldy队列中的原始文件，调用上传方法完成最终的Google Drive上传。

完整代码示例 #

import React, { useState, useRef, useEffect } from "react";
import DriveUploady from "drive-uploady";
import { UploadButton } from "@rpldy/upload-button";
import { useUploady } from "@rpldy/uploady";

// 简单自定义图片编辑器（可替换为第三方专业编辑器）
const ImageEditor = ({ file, onSave }) => {
  const canvasRef = useRef(null);
  const [isEditing, setIsEditing] = useState(false);

  useEffect(() => {
    if (!file) return;
    
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        const canvas = canvasRef.current;
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        setIsEditing(true);
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  }, [file]);

  const handleSave = () => {
    canvasRef.current.toBlob((blob) => {
      // 保留原始文件的名称和MIME类型
      const editedFile = new File([blob], file.name, { type: file.type });
      onSave(editedFile);
      setIsEditing(false);
    }, file.type);
  };

  if (!isEditing) return null;

  return (
    <div>
      <canvas ref={canvasRef} />
      <button onClick={handleSave}>保存编辑</button>
    </div>
  );
};

const DriveImageUploader = ({ CLIENT_ID, IMG_FOLDER_ID }) => {
  const [selectedFile, setSelectedFile] = useState(null);
  const { uploader, getPendingFiles, updateFile } = useUploady();

  useEffect(() => {
    // 监听文件添加事件，捕获用户选中的图片
    const onFileAdded = (data) => {
      // 单文件场景示例，多文件可扩展遍历逻辑
      const file = data.items[0].file;
      setSelectedFile(file);
    };

    uploader.on("files-added", onFileAdded);
    
    return () => {
      uploader.off("files-added", onFileAdded);
    };
  }, [uploader]);

  const handleEditSave = (editedFile) => {
    const pendingFiles = getPendingFiles();
    if (pendingFiles.length > 0) {
      // 替换队列中的原始文件为编辑后的文件
      updateFile(pendingFiles[0].id, editedFile);
      // 手动触发上传
      uploader.start();
    }
  };

  return (
    <DriveUploady
      clientId={CLIENT_ID}
      scope="https://www.googleapis.com/auth/drive.file"
      params={{ parents: [IMG_FOLDER_ID] }}
      accept="image/*"
      multiple={false} // 单文件示例，多文件可改为true并扩展编辑逻辑
      autoUpload={false} // 核心配置：关闭自动上传
    >
      <UploadButton />
      {selectedFile && (
        <ImageEditor file={selectedFile} onSave={handleEditSave} />
      )}
    </DriveUploady>
  );
};

export default DriveImageUploader;

关键细节说明 #

• 自动上传控制：autoUpload={false}是实现编辑后上传的基础，必须配置以阻止文件选中后直接上传。
• 编辑器替换：示例中的Canvas编辑器仅作演示，实际项目中可替换为react-easy-crop、react-image-crop等专业图片编辑库，只需保证最终能生成编辑后的File/Blob对象即可。
• 多文件支持：若需处理多文件编辑，可遍历getPendingFiles()返回的文件列表，为每个文件关联独立的编辑器实例，完成编辑后逐个替换并触发上传。
• 文件替换逻辑：通过updateFile方法修改rpldy的待上传队列，确保上传的是编辑后的文件而非原始文件。

内容的提问来源于stack exchange，提问作者Mayank Kumar Chaudhari