如何自定义Uploadthing的上传按钮？含图片/SVG替换方法咨询

完全可以将UploadThing的默认上传按钮替换为图片或SVG，UploadButton组件支持传入自定义子元素，直接把你想要的内容放在组件标签内部即可，上传逻辑不受影响。

下面是具体实现示例：

替换为图片按钮 #

import { UploadButton } from "~/utils/uploadthing";
 
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <UploadButton
        endpoint="imageUploader"
        onClientUploadComplete={(res) => {
          console.log("Files: ", res);
          alert("Upload Completed");
        }}
        onUploadError={(error: Error) => {
          alert(`ERROR! ${error.message}`);
        }}
      >
        {/* 自定义图片按钮 */}
        <img 
          src="/upload-icon.png" 
          alt="上传图片" 
          className="w-12 h-12 cursor-pointer hover:opacity-80 transition-opacity"
        />
      </UploadButton>
    </main>
  );
}

替换为SVG按钮 #

import { UploadButton } from "~/utils/uploadthing";
 
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <UploadButton
        endpoint="imageUploader"
        onClientUploadComplete={(res) => {
          console.log("Files: ", res);
          alert("Upload Completed");
        }}
        onUploadError={(error: Error) => {
          alert(`ERROR! ${error.message}`);
        }}
      >
        {/* 自定义SVG按钮 */}
        <svg 
          xmlns="http://www.w3.org/2000/svg" 
          fill="none" 
          viewBox="0 0 24 24" 
          strokeWidth={1.5} 
          stroke="currentColor" 
          className="w-12 h-12 cursor-pointer hover:text-blue-600 transition-colors"
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
        </svg>
      </UploadButton>
    </main>
  );
}

注意事项 #

• 可以通过修改className调整图片/SVG的尺寸、颜色、hover效果等样式，适配你的页面设计。
• 点击自定义元素时，UploadButton的文件选择弹窗、上传回调等逻辑会正常执行，和默认按钮功能一致。

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