如何引入七牛SDK

• 1. 注册七牛帐号（上传身份证）
• 2. 创建一个篮子（bucket）
• 3. 创建一个 nodejs server
  • 1. 进入七牛 SDK 官网，选择 Node.js
  • 2. npm init -y
  • 3. npm install qiniu
  • 4. 添加 /uptoken 路由，新建qiniu-key.json里面写入密匙
       {"accessKey" : "", "secretKey": "" }
  • 5. 在server.js 中添加代码

      if(path==='/uptoken'){
         response.statusCode = 200
         response.setHeader('Content-Type', 'text/json;charset=utf-8')
         response.setHeader('Access-Control-Allow-Origin', '*')
         response.removeHeader('Date')
    
         var config = fs.readFileSync('./qiniu-key.json')
         config = JSON.parse(config)
    
         let {accessKey, secretKey} = config;
         var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
         var options = {
         scope: '篮子名称', //你的篮子名称
         };
         var putPolicy = new qiniu.rs.PutPolicy(options);
         var uploadToken=putPolicy.uploadToken(mac);
         response.write(`
         {
         "uptoken": "${uploadToken}"
         }
         `)
         response.end()
     }else{
    
    

  6. 将 uploadToken 作为响应输出
  7. node server.js 8888，启动 server

4. 参考七牛的示例，使用(1.0.24版本) Qiniu.uploader 来上传文件

• 1. 引入 moxie 1.x//这个在plupload中有源代码
• 2. 引入 plupload 2.x npm install plupload --save
• 3. 引入 qiniu-js 1.x npm install qiniu-js@1.0.24 --save

   <script src="../vendors/moxie.js"></script>
   <script src="../node_modules/plupload/js/plupload.min.js"></script>
   <script src="../node_modules/qiniu-js/dist/qiniu.min.js"></script>
  
  

4.  初始化上传按钮

    ```
         var uploader = Qiniu.uploader({
             runtimes: 'html5',    //上传模式,依次退化
             browse_button: 'xxx',       //上传选择的点选按钮，**必需**
             uptoken_url : 'http://localhost:8888/uptoken',
             domain: 'http://qiniu-plupload.qiniudn.com/',   //bucket 域名，下载资源时用到，**必需**
             get_new_uptoken: false,  //设置上传文件的时候是否每次都重新获取新的token
             max_file_size: '40mb',           //最大文件体积限制
             dragdrop: true,                   //开启可拖曳上传
             drop_element: 'yyy',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
             auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
             init: {
                 'FilesAdded': function(up, files) {
                     plupload.each(files, function(file) {
                         // 文件添加进队列后,处理相关的事情
                     });
                 },
                 'BeforeUpload': function(up, file) {
                     // 每个文件上传前,处理相关的事情
                 },
                 'UploadProgress': function(up, file) {
                     // 每个文件上传时,处理相关的事情
                     uploadStatus.textContent = '上传中'
                 },
                 'FileUploaded': function(up, file, info) {
                     uploadStatus.textContent = '上传完毕'
                     // 每个文件上传成功后,处理相关的事情
                     // 其中 info.response 是文件上传成功后，服务端返回的json，形式如
                     // {
                     //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                     //    "key": "gogopher.jpg"
                     //  }
                     // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

                     // var domain = up.getOption('domain');
                     // var res = parseJSON(info.response);
                     // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
                 },
                 'Error': function(up, err, errTip) {
                     //上传出错时,处理相关的事情
                 },
                 'UploadComplete': function() {
                     //队列文件处理完毕后,处理相关的事情
                 },
             }
         });
    ```