七牛云文件上传接口的使用

上传前的准备工作

调用七牛云的上传接口之前，您需要确认以下要求都已完成：

1. 登录 七牛云开发者平台。
2. 创建一个 空间（Bucket）。根据您的需求在不同的存储区域创建空间， 存储区域可参考 七牛云存储区域

注意： 如果您是体验用户，新建存储空间时，会遇到 “新建存储空间失败，请先实名认证”的提示信息。

七牛云的上传有两种模式

表单上传
分片上传

我这里以表单上传为例，首先您可自行阅读七牛云官方 表单上传文档

调用接口之前需要先准备好上传凭证（就是调用接口时的upload_token），具体可参考 上传凭证

生成凭证之前需要先构造上传策略，可参考 上传策略 ，可根据您自己的需求自行构造上传策略

七牛云官方提供了各语言的SDK包，您可以下载使用，也可以根据官方上传凭证文档自行组装上传凭证，如下算法使用的是PHP

生成上传凭证算法

写算法之前您需要准备您的 SecretKey 和您的 AccessKey
首先进入 管理控制台 ，点击头像，点击密钥管理 就可以看到您的 SecretKey 和您的 AccessKey

# 构造上传策略
$putPolicy = array(
    'scope' => 'reduwang',
    'deadline' => strtotime( '+1 hour' ),
    'saveKey' => date( 'YmdHis' ),
    'insertOnly' => 1
);

#  将上传策略序列化成为JSON并进行Base64 编码，得到待签名字符串
$putPolicy = base64_encode( json_encode( $putPolicy ) );

$SecretKey = 您的SecretKey，类型(string)

$AccessKey = 您的AccessKey ，类型(string)

# 生成待签名字符串
$sign = hash_hmac( 'sha1' , $putPolicy , $SecretKey , true );

# 转码
$encodedSign = base64_encode( $sign );

# 生成上传token
$token = $AccessKey . ':' . $encodedSign . ':' . $putPolicy;

上传接口地址可参考上面提到的 存储区域

前端代码示例：

# 将刚才生成的上传凭证放入隐藏域
<input type="hidden" id="uploadToken" value="">

# 上传文件按钮（id或者name建议设置为file，不然可能会出问题）
<input name="file" type="file" id="file" style='width:300px' size='30' class='pubinputs' />

# js代码，这里使用的是layui上传文件中的接口上传
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/layui.js"></script>
<script type="text/javascript">
layui.use('upload', function() {
      var upload = layui.upload;

      var token = $("#uploadToken").val();


      upload.render({
        elem: '#file'
        ,url: 'http://upload.qiniup.com' // 文件上传接口地址，根据您的空间所在的区域选择不同的接口地址
        ,method: 'get'  //可选项。HTTP类型，默认post
        ,headers: {enctype: 'multipart/form-data'}
        ,data: {action:'http://upload.qiniup.com',token:token} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
        ,done: function(res){
          // console.log( '上传成功' + res );
          if( res.key != '' ){
           return  alert( '上传成功，文件名为：' + res.key );
          }
        }
        ,error: function(index,upload){
          //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
          // console.log( '上传失败：' + upload )
          return alert( '上传失败，刷新页面后重试' );
        }
      });
    });
</script>

代码并非无问题，有待继续完善。感谢您的阅读！