如何使用express和reactjs在Uploadthing上上传图片

Question

我厌倦了在“Uploadthing”上上传图像，但我不能。 我提供这些如何解决这个问题

我的服务器文件夹 索引.js 文件 index.js

上传东西.js uploadthing.js

我的前端文件夹 app.jsx 我在其中导入了 uploadButton 在此输入图片描述

utils/upload.js 是我定义的 uploadButton 上传.js

你能告诉我问题所在吗，输出是在选项卡上并且每次都会加载 选项卡上的输出

我想向任何人提出这个问题并给出解决该问题的良好解决方案

Answer 1

我希望我还不算太晚。但我会建议一些改变。

1. 使用新的方式来授权uploadThing。 参考这里
2. 在您的组件上传递一些道具。 参考这里

在你的index.js第14行（你的配置），使用新的方法来验证uploadthing。您可以在 API Keys 选项卡下的 uploadThing 项目中获取该令牌。

上传参考菜单

config: {
    token: UPLOADTHING_TOKEN,
}

在您的 App.jsx 上，您的 Button 组件需要一些道具来理解和链接所有内容。

<UploadButton 
     endpoint="imageUploader"
     onClientUploadComplete={res => console.log(res)}
     onUploadError={err => console.error(err)}
     config={{mode: "manual"} 
/>

只有端点是必要的，其他道具更多的是为您提供有关上传情况的反馈。

端点必须与您在案例“imageUploader”上的 uploadthing.js（第 6 行）上调用的设置相匹配

并且 config={{mode: "manual"}} 是个人喜好。如果没有它，文件将自动上传。有了它，需要确认点击。

最后，在发布问题时也尝试发布您的代码片段。不断地在屏幕截图链接之间来回跳转有点痛苦。人们只需复制一个片段即可进行更改并发回给您。