七牛云存储集成教程：为海风小店hioshop-server实现高效图片管理

2026-09-28 14:57:44
阅读量：111

七牛云存储集成教程：为海风小店hioshop-server实现高效图片管理

【免费下载链接】hioshop-server 海风小店，开源商城，微信小程序商城服务器端项目地址: https://gitcode.com/gh_mirrors/hi/hioshop-server

🚀 为什么选择七牛云存储？

海风小店hioshop-server作为一个完整的微信小程序商城系统，商品图片、用户头像、分享海报等多媒体内容的管理至关重要。使用七牛云存储可以带来以下优势：

CDN加速：全球分布式节点，图片加载速度提升300%+
自动压缩优化：智能图片处理，节省流量和存储空间
高可靠性：99.999999999%的数据持久性保障
成本效益：按需付费，相比自建服务器更经济

海风小店hioshop-server集成七牛云存储后，图片管理将更加高效稳定

📋 准备工作

在开始集成前，你需要准备以下内容：

七牛云账户：注册七牛云账号并完成实名认证
对象存储空间：创建一个Bucket用于存储商城图片
Access Key：在七牛云控制台获取Access Key和Secret Key
域名配置：为Bucket绑定自定义域名（支持HTTPS）

🔧 配置七牛云参数

打开海风小店的配置文件 src/common/config/config.js，找到七牛云配置部分：

qiniu: {
    access_key: '你的AccessKey',      // 在七牛密钥管理中获取
    secret_key: '你的SecretKey',    // 在七牛密钥管理中获取
    bucket: '你的Bucket名称',        // 请填自己的bucket名称
    domain: '你的域名/'              // 请填自己的domain域名
},
qiniuHttps: {
    access_key: '你的AccessKey',     // 在七牛密钥管理中获取
    secret_key: '你的SecretKey',     // 在七牛密钥管理中获取
    bucket: '你的Bucket名称',        // 自己设置的HTTPS空间
    domain: '你的HTTPS域名/',        // 例如：'https://img.你的域名.com/'
    zoneNum: 0                       // 地区设置：华东0；华北1；华南2；北美3；东南亚4
}

注意：qiniuHttps配置专门用于存储分享图片的HTTPS图片，对应商品表中的https_pic_url字段。

🛠️ 核心代码解析

1. 七牛云Token生成服务

海风小店通过 src/admin/service/qiniu.js 和 src/api/service/qiniu.js 两个服务文件来生成上传凭证：

async getQiniuToken() {
    let accessKey = think.config('qiniu.access_key');
    let secretKey = think.config('qiniu.secret_key');
    let bucket = think.config('qiniu.bucket');
    let domain = think.config('qiniu.domain');
    let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
    let currentTime = parseInt(new Date().getTime() / 1000) + 600;
    let key = think.uuid(32);
    let options = {
        scope: bucket,
        deadline: currentTime,
        saveKey: key
    };
    let putPolicy = new qiniu.rs.PutPolicy(options);
    let uploadToken = putPolicy.uploadToken(mac);
    let data = {
        uploadToken: uploadToken,
        domain: domain
    };
    return data;
}

2. 前端图片上传流程

当管理员在后台添加商品时，系统会调用七牛云上传接口：

前端请求获取七牛云上传Token
使用Token直接上传图片到七牛云
返回图片URL保存到数据库
前端显示七牛云CDN加速后的图片

3. HTTPS图片处理

对于需要HTTPS访问的分享图片，系统使用专门的qiniuHttps配置：

async uploadHttpsImageAction() {
    let url = this.post('url');
    let accessKey = think.config('qiniuHttps.access_key');
    let secretKey = think.config('qiniuHttps.secret_key');
    // ... 处理HTTPS图片上传逻辑
}