如何使用get_serving_url()下载图片并获取原始文件名？

我之前也碰到过这个头疼的问题——默认用get_serving_url()生成的链接下载图片时，浏览器总是自动命名为unnamed.jpg，完全看不到上传时的原始文件名。下面是几个我亲测可行的解决方案：

方案1：利用Cloud Storage元数据（图片存GCS时适用） #

如果你的图片存储在Google Cloud Storage（GCS）里，直接给GCS对象配置Content-Disposition元数据是最省事的办法：

• 登录GCS控制台，找到对应的图片对象
• 编辑它的元数据，添加键为Content-Disposition，值为attachment; filename="你的原始文件名.jpg"（替换成实际的文件名）
• 保存后再用原来的serving URL下载，浏览器就会自动使用你设置的文件名了

方案2：后端代理处理（自定义下载端点） #

如果没法直接修改GCS元数据，或者需要动态控制文件名，可以在后端写个简单的代理接口：

1. 前端请求你的自定义端点（比如/download-image?blob_key=xxx），同时传递原始文件名参数
2. 后端接请求后，通过get_serving_url()获取图片内容
3. 设置响应头Content-Disposition: attachment; filename="原始文件名.jpg"
4. 将图片内容返回给前端

举个Python（App Engine环境）的简易示例：

from google.appengine.api import images
from google.appengine.ext import blobstore
import webapp2

class DownloadImageHandler(webapp2.RequestHandler):
    def get(self):
        blob_key = self.request.get('blob_key')
        original_filename = self.request.get('filename')
        
        # 获取图片二进制数据
        blob_info = blobstore.BlobInfo.get(blob_key)
        image_data = blob_info.open().read()
        
        # 设置响应头，指定下载文件名
        self.response.headers['Content-Type'] = blob_info.content_type
        self.response.headers['Content-Disposition'] = f'attachment; filename="{original_filename}"'
        self.response.write(image_data)

app = webapp2.WSGIApplication([('/download-image', DownloadImageHandler)], debug=True)

方案3：前端JavaScript处理（无需改动后端） #

如果不想碰后端，也可以在前端通过JS实现自定义文件名下载：

1. 用fetch获取图片的Blob数据
2. 创建a标签，设置href为Blob的临时URL，download属性设为原始文件名
3. 触发a标签的点击事件完成下载

示例代码：

async function downloadImageWithFilename(imageUrl, originalFilename) {
  try {
    const response = await fetch(imageUrl);
    const blob = await response.blob();
    const tempUrl = URL.createObjectURL(blob);
    
    const downloadLink = document.createElement('a');
    downloadLink.href = tempUrl;
    downloadLink.download = originalFilename;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    
    // 清理临时资源
    URL.revokeObjectURL(tempUrl);
    document.body.removeChild(downloadLink);
  } catch (err) {
    console.error('下载失败:', err);
  }
}

// 使用示例
downloadImageWithFilename('http://lh3.googleusercontent.com/93uhV8K2yHkRuD63KJxlTi7SxjHS8my2emuHmGLZxEmX99_XAjTN3c_2zmKVb3XQ5d8FEkwtgbGjyYpaDQg=d', 'my-vacation-photo.jpg');

注意：前端方案可能会遇到跨域问题，需要确保图片服务器配置了CORS规则，允许你的前端域名访问。

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