七牛雲文件上傳接口的使用

上傳前的準備工作

調用七牛雲的上傳接口之前，您需要確認以下要求都已完成：

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="<?php echo $token; ?>">

# 上傳文件按鈕（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>

代碼並非無問題，有待繼續完善。感謝您的閱讀！