如何使用JavaScript或Apps Script上传视频至YouTube（已具备blob URL）

实现的核心前提是完成YouTube Data API v3的OAuth2授权，获取具备视频上传权限的有效访问令牌，必须明确：blob格式的本地URL仅在当前浏览器会话内可访问，要先提取对应二进制内容，不能直接把URL传给上传接口。

• 从Blob URL提取实际的Blob文件对象

  async function getFileBlobFromUrl(blobUrl) {
    const response = await fetch(blobUrl)
    return await response.blob()
  }
  

• 初始化可恢复的上传会话
  向YouTube上传服务发起会话初始化请求，携带视频的元数据（标题、描述、隐私设置）和文件基础信息，拿到后续上传的专属会话地址：

  async function initUploadSession(accessToken, videoBlob, videoMeta) {
    const response = await fetch('https://www.googleapis.com/upload/youtube/v3/videos?uploadType=resumable&part=snippet,status', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${accessToken}`,
        'Content-Type': 'application/json',
        'X-Upload-Content-Length': videoBlob.size,
        'X-Upload-Content-Type': videoBlob.type
      },
      body: JSON.stringify(videoMeta)
    })
    // 从响应头提取专属上传会话地址
    return response.headers.get('Location')
  }
  

• 执行二进制内容上传
  把提取到的Blob内容直接PUT到初始化拿到的会话地址，即可完成上传：

  async function uploadFileToSession(sessionUrl, videoBlob) {
    const response = await fetch(sessionUrl, {
      method: 'PUT',
      headers: {
        'Content-Length': videoBlob.size,
        'Content-Type': videoBlob.type
      },
      body: videoBlob
    })
    return response.json() // 成功后返回包含视频ID的响应结果
  }
  

注意 浏览器端直接调用接口时，需要在Google API控制台将你的网页域名加入授权来源列表，否则会触发跨域拦截。

Apps Script运行在Google服务器端，仅能访问具备公网可访问性的资源。如果你的Blob URL是浏览器本地生成的blob:http/https格式地址，Apps Script是无法直接拉取到内容的，需要先通过前端把Blob内容传到Apps Script的Web App端点，再由Apps Script完成上传。

• 前置配置
  在Apps Script项目中开通YouTube高级服务，确保授权范围包含视频上传权限，部署为可通过Web访问的应用，获取对应的请求端点。
• 服务端接收逻辑
  接收前端传来的视频Blob，直接调用内置的YouTube服务完成上传：

  function doPost(request) {
    const videoBlob = request.postData.getContentBlob()
    // 构造视频元数据
    const videoConfig = {
      snippet: {
        title: "通过Apps Script上传的视频",
        description: "测试上传场景生成的视频"
      },
      status: {
        privacyStatus: "unlisted"
      }
    }
    // 调用服务完成上传
    const uploadResult = YouTube.Videos.insert(videoConfig, "snippet,status", videoBlob)
    return ContentService.createTextOutput(JSON.stringify({
      success: true,
      videoId: uploadResult.id
    }))
  }
  

• 前端配合传值逻辑
  因为本地Blob URL无法被Apps Script直接访问，需要先在前端把Blob内容提取出来，推送到Apps Script的Web App端点：

  async function pushBlobToAppsScript(blobUrl, scriptEndpoint) {
    const videoBlob = await (await fetch(blobUrl)).blob()
    const formData = new FormData()
    formData.append('video', videoBlob)
    await fetch(scriptEndpoint, {
      method: 'POST',
      body: formData
    })
  }
  

常见踩坑点 #

• 不要尝试把本地生成的blob:格式URL直接传给Apps Script或者YouTube的上传接口，这类地址仅存在于当前浏览器的内存中，外部服务完全无法访问
• 单文件超过100MB的上传场景，建议开启分片传输逻辑，避免单次请求超时导致上传失败
• 不管是纯JS方案还是Apps Script方案，授权时必须勾选视频上传对应的权限范围，否则接口会返回权限不足的错误

内容的提问来源于stack exchange，提问作者Website Developer