yii2中实现七牛直传需后端提供带签名的上传token:安装sdk、用配置密钥初始化auth、指定bucket、调用uploadtoken生成uptoken并json返回;前端通过表单或vue提交file和token至七牛上传域名。

要在Yii2项目中实现用户上传图片到七牛云,必须让前端拿到一次性的、带签名的上传凭证(Token),再用这个Token直传文件到七牛服务器,跳过你的应用服务器中转。
后端生成七牛上传Token
在Yii2控制器中新建一个Action,例如actionGetQiniuToken,用于响应前端获取Token的请求。
第一步:安装七牛PHP SDK。执行composer require qiniu/php-sdk,确保vendor/qiniu/php-sdk目录存在。
第二步:在Action内引入SDK并初始化Auth对象。使用你在七牛控制台申请的AccessKey和SecretKey——【这两个密钥绝不能硬编码在代码里,应从Yii2配置或环境变量读取】。
第三步:指定存储空间(bucket)名称。该名称必须与你在七牛控制台创建的空间名完全一致,大小写敏感。
第四步:调用$auth->uploadToken($bucket, $key, $expires, $policy)生成Token。其中$key可为空(即设为null),表示由七牛自动生成文件名;若需固定路径或前缀(如user/avatar/),则传入字符串,但【一旦指定了$key,前端上传时必须严格匹配该key,否则401报错】。
第五步:将Token以JSON格式返回,字段名为uptoken,状态码200。不要额外包装data层,前端JS会直接取值。
前端表单直传(无SDK)
方法一:纯HTML + jQuery提交
准备一个<form id="qiniu-upload"></form>,包含<input type="file" name="file">和一个隐藏域<input type="hidden" name="token">。
页面加载后,先GET请求/site/get-qiniu-token(即你上面写的Action路由),拿到Token后填入隐藏域的value。
提交时拦截表单默认行为,用FormData构造数据体,【必须包含file字段和token字段,且字段名要与七牛API要求一致】。
POST目标地址为七牛上传域名,例如华东区是https://upload-z1.qiniup.com,注意协议必须为https。
方法二:Vue组件中调用(基于axios)
在upload触发前,调用api.getQiniuToken()获取Token,解构出uptoken。
新建FormData实例,append('file', file),再append('token', uptoken)。
发送POST请求至https://upload-z1.qiniup.com,设置headers: {'Content-Type': undefined},并关闭transformRequest自动处理。
关键校验与调试要点
上传失败时,优先检查响应体中的error字段。常见错误码:401 unauthorized说明Token无效或过期;400 invalid bucket说明bucket名拼错;403 forbidden多因AccessKey/SecretKey权限不足或Token scope不匹配。
七牛返回成功响应后,JSON中必含key字段——这是该文件在七牛空间内的唯一路径,也是你后续在网页中展示图片时要拼接CDN域名的依据。
每次上传都应重新请求Token。Token有效期默认3600秒,但不应复用,尤其在多文件并发上传场景下。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











