视频上传后返回localhost URL而非UploadThing地址的原因排查

原因 #

这是Payload的默认设计行为：Payload会为上传的文件生成自身API的代理URL（即你看到的http://localhost:3000/api/videos/file/Boat_13.mp4），而非直接返回UploadThing的原始公网地址。这个代理路由用于统一处理文件的访问控制、权限验证等逻辑，即便使用第三方存储插件，默认行为依然如此。

UploadThing插件已将原始公网地址存储在文档的_uploadthingUrl字段中，但Payload默认不会将该字段作为url返回。

解决办法 #

要让Payload返回UploadThing的公网地址作为url，可通过以下两种方式实现：

方式1：启用staticURL配置 #

修改Videos集合的upload配置，添加staticURL: true，Payload会直接使用存储服务商提供的原始URL作为返回的url字段：

import { CollectionConfig } from 'payload'
import { GetVideoUrl, VideoReward } from '@/endpoints/video.rewards'

export const Videos: CollectionConfig = {
  slug: 'videos',
  admin: {
    useAsTitle: 'videoTitle',
  },
  upload: {
    mimeTypes: ['video/mp4'],
    disableLocalStorage: true,
    staticURL: true, // 新增此配置
  },
  endpoints: [VideoReward, GetVideoUrl],
  access: {
    read: () => true,
    create: () => true,
    update: () => true,
    delete: () => true,
  },
  fields: [
    {
      label: 'Video Title',
      name: 'videoTitle',
      type: 'text',
      required: true,
    },
  ],
}

方式2：自定义generateURL函数 #

若需更灵活的URL生成逻辑，可在upload配置中自定义generateURL函数，直接返回UploadThing的原始地址：

import { CollectionConfig } from 'payload'
import { GetVideoUrl, VideoReward } from '@/endpoints/video.rewards'

export const Videos: CollectionConfig = {
  slug: 'videos',
  admin: {
    useAsTitle: 'videoTitle',
  },
  upload: {
    mimeTypes: ['video/mp4'],
    disableLocalStorage: true,
    generateURL: (doc) => {
      // 返回UploadThing存储的原始公网地址
      return doc._uploadthingUrl;
    },
  },
  endpoints: [VideoReward, GetVideoUrl],
  access: {
    read: () => true,
    create: () => true,
    update: () => true,
    delete: () => true,
  },
  fields: [
    {
      label: 'Video Title',
      name: 'videoTitle',
      type: 'text',
      required: true,
    },
  ],
}

验证 #

修改配置后重新上传视频，返回的url字段将变为UploadThing提供的公网地址（例如https://ii6f9cec5l.ufs.sh/f/jt4nCu8PFcktTjOGshmjvul7W8C6VOe9ZJDgwREmUo1Kc）。

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