七牛云在国内是一个很好的图片存储服务器，免费用户有10G的空间，每个月可以有10G的下载流量。 小网站足够个人用户用来写小博客了。

但是，七牛的官方开发文件看起来真的像雾一样。

因此，我要把这次的传图过程记录下来。

上传图像之前，需要准备两件东西：

在访问密钥中，访问密钥和安全密钥可以通过个人中心的密钥管理获得，如图所示。

创建空间，创建配置文件，选择资源主页，然后选择“立即添加”，或者选择对象存储，然后选择“添加”。 然后填写空间的名字，选择区域就可以了。 其中，空格的名称是我们用代码上传到七牛服务器的第三个参数Bucket，将这三个常量输入到配置文件config.qiniu.php中，生成define (' qi Niu _ )

d精细(QI Niu _访问密钥)，) YOUR_AK；

精细(QI Niu _域)、) your _ QI Niu _域；

定义(QI Niu _ Backet )、) YOUR_BUCKET_NAME；

上传证书和上传证书的功能：客户端在上传之前需要从服务器端获取上传证书，在上传资源时作为请求内容的一部分上传证书。 没有证书或拥有非法证书的请求将返回HTTP错误代码401，指示认证失败。

生成规则：

1 .建立上传策略：

上载策略是上载资源时附带的一组配置设置。 根据该配置信息，七牛云存储需要设置用户上传的资源、上传到哪个空间、上传结果是使用回调通知还是重定向行程、反馈信息的内容

{

' scope': 'Bucket string '，

' deadline ' : UNIX时间戳单元32，

“只插入”:分配更新，

“最终用户”:“最终用户字符串”，

“returnurl”:“重定向字符串”，

' return body ' : ' responsebodyforappclientstring '，

“调用规则”:“请求表单服务器字符串”，

“调用主机”:“请求主机服务器字符串”，

“呼叫主体”:“请求主体服务器字符串”，

' callbackbodytype ' : ' requestbodytypeforappserverstring '，

' callbackfetchkey ' : requestkeyforappint

“永久操作系统”:“永久操作系统”，

“永久声明”:“永久声明”，

“永久管道”:“永久管道”，

“保存密钥”:“保存密钥字符串”，

“最小文件”:最小文件64，

' fsize limit ' :文件限制64，

“检测时间”:自动检测时间类型，

' mime limit ' : ' mimelimitstring '

' deleteafterdays ' : ' deleteafterdaysint '

}

现有的上传策略包括$putPolicy=array (

' scope '=QI Niu _ Bucket.' : '.$文件名，

' deadline'=time(3600，

'返回主体'=' {

'名称' :美元(名称)、

'文件_ URL ' :美元(x :文件_ URL )

)；

该上传策略是：1.指定图像上传到` QINIU_BUCKET `存储空间，同时该token只允许上传文件名为` $filename `的文件

2. token的有效时间为1小时。

3 .设定回复信息，回复上传文件的文件名和自定义参数的` file_url `

将上载策略序列化为JSON格式。 用户可以使用不同语言的JSON库，也可以手动连接字符串。 序列化会生成以下格式的字符串： (字符串值以外的部分有空格或

换行）：$putPolicy = json_encode($putPolicy); 或$putPolicy = '{ "scope": "my-bucket:sunflower.jpg", "deadline":1451491200, "returnBody": "{ "name":$(fname), "size":$(fsize), "w":$(imageInfo.width), "h":$(imageInfo.height), "hash":$(etag) }" }' 对 JSON 编码的上传策略进行URL安全的Base64编码，得到待签名字符串：官方给的demo代码为：encodedPutPolicy = urlsafe_base64_encode(putPolicy) 运行之后，发现 urlsafe_base64_encode 这个函数是自定义的，估计相当于将 +,/号转换为 -,_ function _urlsafe_base64_encode($str){ $find = array('+', '/'); $replace = array('-', '_'); return str_replace($find, $replace, base64_encode($str)); } 使用SecretKey对上一步生成的待签名字符串计算HMAC-SHA1签名：官方给的demo代码为：sign = hmac_sha1(encodedPutPolicy, QINIU_SECRET_KEY) 然而， hmac_sha1 这个函数也不是php自带的。经过搜索发现，其实PHP5.1.2之后的版本内置了直接产生的函数，只是名字不一样罢了： hash_hmac，因此需要将这里修改为：$sign = hash_hmac('sha1' ,$encodedPutPolicy, QINIU_SECRET_KEY, true); 第一个参数为xndkl算法名（支持md5，sha256，haval160,4等，具体可到 hash_algos()中查询）；第二个参数为需要进行xndkl的信息；第三个参数为秘钥；第四个参数为输出格式（true为输出二进制，false为输出16进制）对签名进行URL安全的Base64编码：官方代码：encodedSign = urlsafe_base64_encode(sign) 这里的 urlsafe_base64_encode 依然为上述的自定义函数。将AccessKey、encodedSign 和 encodedPutPolicy 用英文符号 : 连接起来：$uploadToken = QINIU_ACCESS_KEY . ':' . $encodedSign . ':' . $encodedPutPolicy 返回token至客户端echo json_encode(array('token' => $uploadToken, 'key' => $filename, 'fileurl' => QINIU_DOMAIN)); 这里返回了文件名和文件url，主要是因为，保证文件在七牛中的唯一性，和可以随时更改七牛的空间访问地址。上传图片使用js直接上传图片至七牛服务器他的过程为：向服务器请求 uploadToken =>获取 ‘uploadToken` 后上传图片 =>上传成功，显示图片。这里没有使用 zepto jquery 这种库，所以浏览器的兼容性为兼容 FormData 的现代浏览器使用 xhr 和 FormData 进行异步传输数据。function ajax(options){ options.start && options.start.call('start'); //执行上传操作 var xhr = new XMLHttpRequest(); xhr.open("post", options.url, true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { returnDate = JSON.parse(xhr.responseText); options.success && options.success.call('success', returnDate); }; }; //表单数据 var fd = new FormData(); for (k in options.data) { fd.append(k, options.data[k]); } fd.append('file', options.file); //执行发送 result = xhr.send(fd); }

新建一个表单 form

<form action="" method="post" name="upload_form" hidden> <input type="file" name="file"> <input type="hidden" name="key" value=""> <input type="hidden" name="x:file_url" value=""> <input type="hidden" name="token" value=""> </form> 给上传文件的按钮绑定一个 change 时间：file.addEventListener('change', function(e){ var selected_file = e.target.files[0]; // 先请求服务器获取token ajax({ url: '/upload.php', data: { filename: selected_file.name }, start: function(){ console.log('start to get uploadToken'); }, success: function(data){ // 给表单中的参数赋值 form.key.value = data.key; form.file_url.value = data.fileurl+data.key; form.token.value = data.token; // 执行上传图片操作 uploadImage(selected_file) } }) })

开始上传文件至七牛

function uploadImage(file){ ajax({ // 如果 url: 'http://upload.qiniu.com/', // url: 'https://up.qbox.me', data: { file: file, key: form.key.value, 'x:file_url': form.file_url.value, token: form.token.value, }, start: function(){ console.log('start to upload Image to Qiniu'); }, success: function(data){ // 给表单中的参数赋值 console.log(data); image.src = data.file_url } }) }

最终实现

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注 ｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”