但是，七牛的官方开拓文档至心会看得一头雾水。

于是，先记录下来这次传图的过程。

在上传图片之前，须要准备两样东西：

php七牛图片上传应用七牛云存储图片 之 上传图片 jQuery

AccessKeySecretKey

个中， AccessKey 和 SecretKey 能在 个人中央 > 秘钥管理中得到,如图。

创建空间 并 创建配置文件选择 资源主页 ，再选择 立即添加，或者选择 工具存储 ，然后选择 添加 。
然后填上空间的名字，选择区域即可。
个中，空间的名字是我们利用代码上传至七牛做事器的第三个参数 Bucket可以将这3个常量存储在配置文件config.qiniu.php中

define('QINIU_SECRET_KEY', 'YOUR_SK');define('QINIU_ACCESS_KEY', 'YOUR_AK');define('QINIU_DOMAIN', 'YOUR_QINIU_DOMAIN');define('QINIU_BUCKET', 'YOUR_BUCKET_NAME');获取上传凭据上传凭据的浸染：

客户端上传前须要先从做事端获取上传凭据，并在上传资源时将上传凭据作为要求内容的一部分。
不带凭据或带造孽凭据的要求将返回 HTTP 缺点码 401，代表认证失落败。

生成规则：

1.布局上传策略：

上传策略是资源上传时附带的一组配置设定。
通过这组配置信息，七牛云存储可以理解用户上传的需求：它将上传什么资源，上传到哪个空间，上传结果是回调关照还是利用重定向跳转，是否须要设置反馈信息的内容，以及授权上传的截止韶光等等。

{ \"大众scope\"大众: \公众<Bucket string>\"大众, \"大众deadline\"大众: <UnixTimestamp uint32>, \公众insertOnly\"大众: <AllowFileUpdating int>, \"大众endUser\"大众: \公众<EndUserId string>\"大众, \"大众returnUrl\公众: \"大众<RedirectURL string>\"大众, \"大众returnBody\公众: \"大众<ResponseBodyForAppClient string>\"大众, \"大众callbackUrl\"大众: \"大众<RequestUrlForAppServer string>\"大众, \"大众callbackHost\"大众: \公众<RequestHostForAppServer string>\公众, \"大众callbackBody\"大众: \"大众<RequestBodyForAppServer string>\"大众, \"大众callbackBodyType\"大众: \"大众<RequestBodyTypeForAppServer string>\"大众, \"大众callbackFetchKey\"大众: <RequestKeyForApp int> \公众persistentOps\"大众: \公众<persistentOpsCmds string>\"大众, \公众persistentNotifyUrl\"大众: \"大众<persistentNotifyUrl string>\"大众, \"大众persistentPipeline\"大众: \公众<persistentPipeline string>\"大众, \"大众saveKey\公众: \"大众<SaveKey string>\"大众, \"大众fsizeMin\公众: <FileSizeMin int64>, \"大众fsizeLimit\公众: <FileSizeLimit int64>, \公众detectMime\"大众: <AutoDetectMimeType int>, \"大众mimeLimit\"大众: \"大众<MimeLimit string>\"大众 \"大众deleteAfterDays\"大众: \"大众<deleteAfterDays int>\"大众}

如现有如下上传策略：

$putPolicy = array( 'scope' => QINIU_BUCKET.':'.$filename , 'deadline' => time()+3600 , 'returnBody' => '{ \"大众name\"大众: $(fname), \"大众file_url\公众: $(x:file_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);第一个参数为哈希算法名（支持md5，sha256，haval160,4等，详细可到 hash_algos()中查询）；第二个参数为须要进行哈希的信息；第三个参数为秘钥；第四个参数为输出格式（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 } })}

终极实现

希望本文能帮助到您！

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

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

每周重点占领一个前端技能难点。
更多精彩前端内容私信 我 回答“教程”