使用React Uploady上传图片时如何重命名文件名？

方法1：文件添加时重命名（同步组件内部状态） #

通过useFileAddListener钩子拦截文件添加事件，用Uploady的updateFile方法更新文件元数据，同步组件内的文件显示状态（比如上传列表）。

import { Uploady, useFileAddListener, useUploader } from "@rpldy/uploady";
import { UploadButton } from "@rpldy/upload-button";

const FileRenamer = () => {
  const uploader = useUploader();

  useFileAddListener((files) => {
    files.forEach((file) => {
      // 自定义重命名规则：前缀+时间戳+原文件名
      const timestamp = Date.now();
      const newName = `upload_${timestamp}_${file.name}`;
      
      // 用uploader.updateFile确保组件状态同步
      uploader.updateFile(file.id, { name: newName });
    });
  });

  return null;
};

const UploadApp = () => {
  return (
    <Uploady destination={{ url: "/your-upload-api" }}>
      <FileRenamer />
      <UploadButton>选择图片上传</UploadButton>
    </Uploady>
  );
};

export default UploadApp;

方法2：上传请求发送前重命名（仅修改服务器接收的文件名） #

如果只需要服务器收到重命名后的文件，不改变组件内显示的文件名，可使用useBeforeSend钩子修改FormData：

import { Uploady, useBeforeSend } from "@rpldy/uploady";
import { UploadButton } from "@rpldy/upload-button";

const RequestPreprocessor = () => {
  useBeforeSend((formData, context) => {
    const { file } = context;
    if (!file) return formData;

    // 移除原文件条目
    formData.delete(file.name);
    
    // 保留原文件扩展名，生成新文件名
    const ext = file.name.split(".").pop();
    const newFileName = `custom_file_${file.id}.${ext}`;
    
    // 添加重命名后的文件到FormData
    formData.append(newFileName, file, newFileName);
    return formData;
  });

  return null;
};

const UploadApp = () => {
  return (
    <Uploady destination={{ url: "/your-upload-api" }}>
      <RequestPreprocessor />
      <UploadButton>选择图片上传</UploadButton>
    </Uploady>
  );
};

export default UploadApp;

关键说明 #

• 方法1会同步更新Uploady内部的文件状态，适合需要在UI上显示重命名后文件名的场景。
• 方法2仅修改上传请求中的数据，组件内仍显示原文件名，适合不需要前端展示改名结果的场景。
• 如果使用@rpldy/upload-list等UI组件，uploader.updateFile能确保列表自动刷新显示新文件名。

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