记录一下阿里云OSS直接通过web端或者其他的前端上传文件时，bucket配置过程

hexu_blog2026-04-17 8:47

当我们上次文档到oss，不通过后端上传，而是改用直接通过前端直连上传时，应该怎么处理？

1.后端接口根据规则返回如下相关参数

2.我的前端代码如下，代码执行后直接返回了url文件地址

html 复制代码

/**
 * 前端直传 OSS，返回可公开访问的文件 URL
 */
export async function uploadVideoToOss(file: File): Promise<string> {
  const signRes = await useClientRequest<AppResp<OssSignData>>('app/video/getOssUploadSign', {
    method: 'GET',
    params: { fileName: file.name },
  })
  if (!signRes || signRes.code !== 200 || !signRes.data) {
    throw new Error(signRes?.msg || '获取上传签名失败')
  }
  const sign = signRes.data
  const formData = new FormData()
  formData.append('key', sign.key)
  formData.append('policy', sign.policy)
  formData.append('OSSAccessKeyId', sign.accessKeyId)
  formData.append('signature', sign.signature)
  formData.append('success_action_status', '200')
  formData.append('file', file)

  const uploadUrl = (sign.uploadUrl || '').replace(/\/$/, '')
  await new Promise<void>((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('POST', uploadUrl)
    xhr.withCredentials = false
    xhr.timeout = 120000
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve()
        return
      }
      reject(new Error(`OSS上传失败：HTTP ${xhr.status}`))
    }
    xhr.onerror = () => reject(new Error('OSS上传失败，请检查网络或跨域配置'))
    xhr.ontimeout = () => reject(new Error('OSS上传超时'))
    xhr.send(formData)
  })
  const base = (sign.domain || sign.uploadUrl || '').replace(/\/$/, '')
  return `${base}/${sign.key}`
}

3.下面这步很重要，OSS中一定要这样配置，否则上传成功页无法访问，会一直提示跨域问题

跨域设置，添加规则

公共访问，必须关闭

读写权限，必须设置公共读