如何在客户端使用OpenStack，通过JS直接上传下载对象存储文件

核心方案确认 #

你完全可以将PHP生成的OpenStack Token下发给前端使用，不需要额外的JS SDK，纯浏览器端JavaScript直接调用OpenStack Swift的REST API就能实现文件直传直下，无需经过PHP服务器中转。

具体实现步骤 #

• 前置配置：给对象存储容器设置CORS规则 #

  先通过PHP SDK调用Swift接口为你要操作的容器配置跨域资源共享规则，允许你的个人网站域名访问，允许的请求头包含X-Auth-Token，允许的请求方法包含你需要用到的GET（下载）、PUT（上传）、DELETE（删除）等操作，否则前端请求会触发跨域报错。

• 第一步：PHP侧生成并返回接口凭证 #

  你用现有PHP SDK生成Token的同时，获取到当前对象存储服务的访问端点（Swift endpoint）、目标容器名称，将这三个参数通过接口返回给前端即可，参考代码：

  // 以下参数均通过OpenStack PHP SDK获取
  $resp = [
      // 有效鉴权Token
      'auth_token' => $authToken->getId(),
      // Swift服务访问地址
      'swift_endpoint' => $objectStoreService->getEndpoint(),
      // 要操作的容器名称
      'container' => 'your_container_name'
  ];
  header('Content-Type: application/json');
  echo json_encode($resp);
  

• 第二步：前端原生JS实现文件操作 #

  不需要引入额外SDK，用原生fetch即可完成所有操作，示例如下：

  上传文件示例

  // 从PHP接口获取鉴权信息
  const authInfo = await fetch('/your_php_api_get_token.php').then(res => res.json());
  // 获取用户选择的文件
  const targetFile = document.querySelector('#upload-input').files[0];
  // 拼接目标文件的存储地址
  const targetUrl = `${authInfo.swift_endpoint}/${authInfo.container}/${targetFile.name}`;
  
  // 发起直传请求
  const uploadResp = await fetch(targetUrl, {
      method: 'PUT',
      headers: {
          'X-Auth-Token': authInfo.auth_token,
          'Content-Type': targetFile.type
      },
      body: targetFile
  });
  
  if (uploadResp.ok) {
      console.log('文件上传成功');
  }
  

  下载私有文件示例

  const fileUrl = `${authInfo.swift_endpoint}/${authInfo.container}/target_file.pdf`;
  const downloadResp = await fetch(fileUrl, {
      headers: {
          'X-Auth-Token': authInfo.auth_token
      }
  });
  
  // 触发浏览器下载
  const blob = await downloadResp.blob();
  const aTag = document.createElement('a');
  aTag.href = URL.createObjectURL(blob);
  aTag.download = 'target_file.pdf';
  aTag.click();
  URL.revokeObjectURL(aTag.href);
  

• 安全优化建议 #

  • OpenStack Token默认有过期时间（通常为1小时），你可以根据业务需求调整有效期，也可以前端检测到Token过期后自动重新请求PHP接口获取新的有效Token
  • 生成Token时尽量最小化权限，仅授予该Token操作指定容器的对应操作权限，避免Token泄露后被滥用
  • 如果是允许公开访问的文件，无需携带Token即可直接访问对应URL，仅私有文件的读写操作需要携带鉴权Token

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