React应用上传本地视频至Google Cloud Storage遇问题求助

核心问题是你上传的是blob URL字符串，不是实际的视频文件二进制数据。URL.createObjectURL()生成的只是本地指向文件的临时URL，并非文件本身，所以axios把这个字符串当成上传内容发给了GCS，导致云端只收到URL文本。

修复步骤： #

• 直接使用event.target.files[0]获取的File对象上传，不需要转成blob URL
• 保留application/octet-stream的Content-Type，完全符合CORS要求

修改文件选择函数：

const VideoSelectChangeFunc = (event) => {
  const selectedFile = event.target.files[0];
  if (selectedFile) {
    // 如果需要预览视频，再用createObjectURL生成URL
    const previewUrl = URL.createObjectURL(selectedFile);
    // 上传时传入原始File对象
    UploadVideo(selectedFile, yourSignedUrl, yourAssetUuid);
  }
};

调整上传函数（无需大改，只需确保传入的是File对象）：

export const UploadVideo = async (file, signedurl, asset_uuid) => {
  let resultState = { state: '', data: {} };
  try {
    const response = await axios({
      method: 'put',
      url: signedurl,
      data: file, // 直接传入File对象，axios会自动处理二进制
      headers: {
        'Content-Type': 'application/octet-stream',
      },
    });
    resultState.state = 'success';
    resultState.data = response.data;
  } catch (error) {
    resultState.state = 'error';
    resultState.data.message = error.message;
    window.toastr.error(error.message);
    console.error(error);
  }
  return resultState;
};

为什么这样可行？ #

File对象是Blob的子类，axios在接收Blob/File类型的data时，会自动将其作为二进制数据发送，配合application/octet-stream头部完全符合GCS的预签名URL上传要求，同时不会触发CORS问题。

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