分享下七牛云空间设置为私有空间之后的相关使用 服务端的代码是PHP哈 如果服务端开发语言不相同 可以看看其他公众号的文章或者其他相关资料 前端是微信小程序 用的七牛里的 社区SDK 大神 柳橙汁 提供的SDK
官方原地址是这个
https://developer.qiniu.com/sdk#community-sdk
项目文档是这个
https://github.com/gpake/qiniu-wxapp-sdk/blob/master/README.md
一次上传多张图片到七牛云的方法 这是很早以前写的关于七牛+微信小程序上传和使用的文章 有兴趣的可以转回去看看 今天发的这个 做了一些优化 用着体验会更好一些 和TDesign还有一个用了蛮久的第三方组件库 一块开发的
直接贴代码了 upload.wxml[直接加载了TDesign的组件]
<z-upload max="30" allow-upload-duplicate-file="{{false}}" draggable="{{dragConf}}" media-type="{{['image']}}" files="{{picList}}" gridConfig="{{gridConfig}}" bind:add="onSelectImage" bind:remove="picDeleteClick" />
upload.js
function initQiniu(upTokenVal) { var options = { region: '',//这个地方需要按照存储空间填入响应的字段 exp:SCN uptoken: upTokenVal, uptokenURL: '', uptokenFunc: function () { }, domain: '',//这里填入CDN加速域名 shouldUseQiniuFileName: true, }; qiniuUploader.init(options);}//上传控件点击方法 onSelectImage(e) { var that = this, fileArr = e.detail.files; console.log('图片上传', fileArr); //这个方法向后端请求了七牛的上传token requestService.qnTokenReq((res) => { if (res && res.data) { initQiniu(res.data); that.uploadAllImages(fileArr); } }); }, //开始上传图片 uploadAllImages(images, index = 0) { var that = this, picArr = that.data.picList; if (index >= images.length) { // 所有图片上传完成,请求服务端生成签名URL requestService.qnUrlCreateReq(picList, (res) => { console.log('服务端签名URL返回', res); if (res && res.data) { that.setData({ picList: res.data }); } }); return; } var currentFile = images[index]; var fileName = currentFile.name || `file_${index}`; qiniuUploader.upload(currentFile.url, (res) => { // success回调 picList.push({ 'url': res.fileURL, 'type': 'image', 'name': fileName, }); // 延迟一小段时间后继续下一张,让用户看到100%的进度 setTimeout(() => { that.uploadAllImages(images, index + 1); }, 300); }, (err) => { // fail回调 console.error('图片上传失败', err); that.uploadAllImages(images, index + 1); // 跳过失败继续 }, {}, (progress) => { // progress回调 }, null // cancelTask（可选） ); },
上面的方法实现了把图片[多张]上传到自己的七牛图床空间里 图床空间这个时候是设置成私有空间的[保护图床资源安全 防止流量被恶意刷取]
需要修改的话 在七牛的控制台 进入空间后 左边菜单里的 空间设置 访问控制里修改就ok
接下来是服务端这边 单独写了个方法 为小程序这边传入的 已经上传好的图片 计算和拼接可以访问的 带有Token的新链接
/** * Notes:生成可以访问私有空间图片的链接 * User: zih * Date: 2026/2/4 * Time: 16:16 * @param $pics * @return array */ public function qiniuUrlCreateBis($pics){ $auth = new Auth(config('qiniu.ak'), config('qiniu.sk')); // 3. 设置签名有效期(秒),不设置则永久有效 $expires = 3600; // 1小时后过期,也可以不传表示永久 $result = []; foreach ($pics as $v) { if (empty($v['url'])) { continue; } $signedUrl = $auth->privateDownloadUrl($v['url'], $expires); $result[] = [ 'type' => 'image', 'name' => $v['name'], 'url' => $signedUrl // 返回签名后的URL ]; } return $result; }
七牛的SK和AK是单独在config文件夹里创建的个设置项的文件 所以方法里直接调用了 对了 privateDownloadUrl 这个方法是SDK里的哈 得先安装PHP的七牛SDK才可以直接调用 result数组组装的数据 是给前端TDesign的upload组件用的固定格式 可以不按照这个格式组装也是OK的 返回的图片url会单独组装有时间戳和token 类似下面这样
.png?e=158943949435&token=k3bCfj8gsdfhjg8jfsd8jvlkFltDDkOFEHaM=
外部如果不通过这个url 是不能访问图床上资源的 这样放到图床里的资源 相对就会安全很多
OK~今天的分享就是这样啦
保持好奇 不断进步 下期见~
微信扫一扫,分享到朋友圈
