如何让访客直接上传图片至Google Cloud Storage？CodeIgniter实现咨询

我来帮你解决这两个关于Google Cloud Storage（GCS）直接上传的问题，尤其是在CodeIgniter框架下的实现方案：

要让访客跳过你的服务器直接传图到GCS，核心是用预签名URL或者签名表单策略——这两种方式能安全授权客户端操作GCS，不用把你的服务账号密钥暴露给前端，安全性拉满。

具体操作步骤： #

1. 给GCS存储桶配置CORS规则
   首先得允许你的前端域名向GCS发送上传请求，否则浏览器会因为跨域拦截请求。你可以通过GCS控制台或者gsutil命令设置CORS策略，比如：

   [
     {
       "origin": ["https://你的网站域名.com"],
       "method": ["POST", "PUT"],
       "responseHeader": ["Content-Type", "x-goog-resumable"],
       "maxAgeSeconds": 3600
     }
   ]
   

   这个规则允许你的域名在1小时内发送PUT/POST请求到GCS，足够完成上传了。

2. 在CodeIgniter里生成预签名URL
   先安装GCS的PHP客户端库：composer require google/cloud-storage，然后在控制器里写一个接口生成临时上传URL：

   use Google\Cloud\Storage\StorageClient;
   
   public function get_upload_url() {
       // 用服务账号密钥初始化GCS客户端，建议把密钥路径存在环境变量里，别硬写代码里
       $storage = new StorageClient([
           'keyFilePath' => FCPATH . 'config/your-service-account-key.json'
       ]);
       
       $bucketName = '你的GCS存储桶名称';
       $bucket = $storage->bucket($bucketName);
       
       // 生成唯一文件名，避免重复覆盖
       $fileName = uniqid('upload_') . '.jpg'; // 可以根据前端传来的扩展名动态调整
       $object = $bucket->object($fileName);
       
       // 生成有效期1小时的PUT请求预签名URL，限制只能传jpeg类型
       $signedUrl = $object->signedUrl(
           new \DateTime('+1 hour'),
           [
               'method' => 'PUT',
               'contentType' => 'image/jpeg'
           ]
       );
       
       // 返回URL和文件名给前端，方便后续存数据库
       return $this->response->json([
           'upload_url' => $signedUrl,
           'file_name' => $fileName
       ]);
   }
   

3. 前端直接上传到GCS
   前端先请求你的CodeIgniter接口拿到预签名URL，然后直接把文件PUT到GCS，不用经过你的服务器：

   async function handleFileUpload(file) {
       // 先拿预签名URL
       const res = await fetch('/api/get_upload_url', {
           method: 'GET',
           headers: { 'X-Requested-With': 'XMLHttpRequest' }
       });
       const data = await res.json();
       
       // 直接上传到GCS
       const uploadRes = await fetch(data.upload_url, {
           method: 'PUT',
           body: file,
           headers: { 'Content-Type': file.type }
       });
       
       if (uploadRes.ok) {
           // 上传成功后，把文件名存到你的数据库，方便后续展示
           await fetch('/api/save_uploaded_file', {
               method: 'POST',
               headers: {
                   'Content-Type': 'application/json',
                   'X-Requested-With': 'XMLHttpRequest'
               },
               body: JSON.stringify({ file_name: data.file_name })
           });
           alert('图片上传成功！');
       } else {
           alert('上传失败，请检查网络后重试');
       }
   }
   

你的现有代码是先传到自己服务器，现在完全绕过这个环节，用上面的预签名方案，然后直接展示GCS上的图片。

替换原有上传逻辑： #

1. 删掉本地上传代码
   原来的move_uploaded_file相关代码可以直接删掉了，再也不用维护服务器上的uploads文件夹啦。

2. 展示GCS上的图片
   图片展示分两种情况：

   • 公开存储桶：如果你的桶设置了公开读权限，图片URL格式是https://storage.googleapis.com/你的桶名/文件名.jpg，直接在视图里用这个URL就行：

     // 从数据库取出文件名
     $file_name = $this->db->get_where('uploads', ['id' => $id])->row()->file_name;
     $gcs_img_url = "https://storage.googleapis.com/你的桶名/{$file_name}";
     echo '<img src="' . $gcs_img_url . '" alt="用户上传图片" class="img-fluid">';
     

   • 私有存储桶：如果不想公开所有文件，可以生成预签名的下载URL，有效期比如1小时：

     // 复用GCS客户端实例
     $storage = new StorageClient([
         'keyFilePath' => FCPATH . 'config/your-service-account-key.json'
     ]);
     $bucket = $storage->bucket('你的桶名');
     $object = $bucket->object($file_name);
     
     $download_url = $object->signedUrl(
         new \DateTime('+1 hour'),
         ['method' => 'GET']
     );
     echo '<img src="' . $download_url . '" alt="用户上传图片" class="img-fluid">';
     

一些关键提醒： #

• 预签名URL一定要设置合理的有效期，比如1小时，避免被恶意滥用；
• 服务账号密钥要妥善保管，别提交到代码仓库，最好用环境变量加载；
• 前端和后端都要做文件类型验证，防止用户上传非图片文件；
• 记得处理上传失败的情况，比如网络错误、GCS返回的4xx/5xx状态码。

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