七牛 js-sdk 按官方例子来报错 putPolicy.scope.indexOf is not a function

Question

按照官方的例子来依然报错我感到很困惑啊。。
后端用的 Ruby on Rails ，所以以下代码里有 <% ... %> 这种东西
<%= javascript_include_tag 是在引入相关的 js 库%>

完整代码如下：

<div class="container">
<div class="body">
    <div class="col-md-12">
        <div id="container">
            <a class="btn btn-default btn-lg " id="pickfiles" href="#" >
                <i class="glyphicon glyphicon-plus"></i>
                <span>选择文件</span>
            </a>
        </div>
    </div>
</div>
</div>


<!-- <%= javascript_include_tag "/qiniu/plupload.2.1.1/moxie" %> -->
<!-- <%= javascript_include_tag "/qiniu/plupload.3.0/plupload.min" %> -->
<!-- <%= javascript_include_tag "/qiniu/plupload.2.2.1/plupload.min" %> -->
<!-- <%= javascript_include_tag "/qiniu/plupload.2.1.1/plupload.min" %> -->
<%= javascript_include_tag "/qiniu/plupload.2.1.1/plupload.full.min" %>
<%= javascript_include_tag "/qiniu/qiniu" %>

<script>
var uploader = Qiniu.uploader({
  runtimes: 'html5,flash,html4',      // 上传模式,依次退化
  browse_button: 'pickfiles',         // 上传选择的点选按钮，**必需**
  // 在初始化时，uptoken, uptoken_url, uptoken_func 三个参数中必须有一个被设置
  // 切如果提供了多个，其优先级为 uptoken > uptoken_url > uptoken_func
  // 其中 uptoken 是直接提供上传凭证，uptoken_url 是提供了获取上传凭证的地址，如果需要定制获取 uptoken 的过程则可以设置 uptoken_func
  // uptoken : 'lJdEpM6JC6xiIuGGujkjePJubBfR2n6pyWO4Nwxk:QhsCuC_WopUBrkpwnayfJ8tUYFo=:eyJzY29wZSI6eyJzY29wZSI6ImhlcmVnbyIsImRlYWRsaW5lIjozNjAwLCJmc2l6ZUxpbWl0Ijo1MjQyODgwMH0sImNhbGxiYWNrVXJsIjoiaHR0cDovL215aGVyZWdvLmNvbS9yZWNlaXZlX3Fpbml1X2NhbGxiYWNrIiwiY2FsbGJhY2tCb2R5IjoiZmlsZW5hbWU9JChmbmFtZSlcdTAwMjZmaWxlc2l6ZT0kKGZzaXplKSIsImRlYWRsaW5lIjoxNDgxNDUwMjU4fQ==', // uptoken 是上传凭证，由其他程序生成
  uptoken_url: '/qiniu_upload_token',         // Ajax 请求 uptoken 的 Url，**强烈建议设置**（服务端提供）
  // uptoken_func: function(file){    // 在需要获取 uptoken 时，该方法会被调用
  //    // do something
  //    return uptoken;
  // },
  unique_names: true,
  get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的 uptoken
  // downtoken_url: '/downtoken',
  // Ajax请求downToken的Url，私有空间时使用,JS-SDK 将向该地址POST文件的key和domain,服务端返回的JSON必须包含`url`字段，`url`值为该文件的下载地址
  // unique_names: true,              // 默认 false，key 为文件名。若开启该选项，JS-SDK 会为每个文件自动生成key（文件名）
  // save_key: true,                  // 默认 false。若在服务端生成 uptoken 的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
  domain: 'http://ohtfyqynr.bkt.clouddn.com',     // bucket 域名，下载资源时用到，**必需**
  container: 'container',             // 上传区域 DOM ID，默认是 browser_button 的父元素，
  max_file_size: '100mb',             // 最大文件体积限制
  // flash_swf_url: 'qiniu/Moxie.swf',  //引入 flash,相对路径
  max_retries: 3,                     // 上传失败最大重试次数
  // dragdrop: true,                     // 开启可拖曳上传
  // drop_element: 'container',          // 拖曳上传区域元素的 ID，拖曳文件或文件夹后可触发上传
  chunk_size: '4mb',                  // 分块上传时，每块的体积
  auto_start: true,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传,
  //x_vars : {
  //    自定义变量，参考http://developer.qiniu.com/docs/v6/api/overview/up/response/vars.html
  //    'time' : function(up,file) {
  //        var time = (new Date()).getTime();
            // do something with 'time'
  //        return time;
  //    },
  //    'size' : function(up,file) {
  //        var size = file.size;
            // do something with 'size'
  //        return size;
  //    }
  //},
  init: {
      'FilesAdded': function(up, files) {
          plupload.each(files, function(file) {
              // 文件添加进队列后,处理相关的事情
          });
      },
      'BeforeUpload': function(up, file) {
             // 每个文件上传前,处理相关的事情
      },
      'UploadProgress': function(up, file) {
             // 每个文件上传时,处理相关的事情
      },
      'FileUploaded': function(up, file, info) {
             // 每个文件上传成功后,处理相关的事情
             // 其中 info 是文件上传成功后，服务端返回的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);
             // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
      },
      'Error': function(up, err, errTip) {
             //上传出错时,处理相关的事情
      },
      'UploadComplete': function() {
             //队列文件处理完毕后,处理相关的事情
      },
      'Key': function(up, file) {
          // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
          // 该配置必须要在 unique_names: false , save_key: false 时才生效

          var key = "";
          // do something with key here
          return key
      }
  }
});

// domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取

// uploader 为一个 plupload 对象，继承了所有 plupload 的方法，参考http://plupload.com/docs
</script>

Answer 1

换了一种方式解决，直接拿 jsfiddle 里的范例改了下拿来用。可以用了。
其实就是表单提交。
用的是 ruby 的 .html.erb 所以代码里有 <% ... %> 这种东西。

<h1>test</h1>

<style>
  .ipt {
      width: 300px;
  }
  label {
      width: 130px;
      display: block;
  }
  ul li {
      list-style:none;
  }
  .ui-progressbar {
  position: relative;
  }
  .progress-label {
  position: absolute;
  left: 50%;
  top: 4px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
  }
  #progressbar{
  height:30px;
  display:none;
  }
  #dialog{
  display:none;
  }
</style>
<ul>
    <!-- <li>
        <label for="token">token:</label>
        <input id="token" name="token" class="ipt" value=""><a target="blank" href="http://jsfiddle.net/gh/get/extjs/4.2/icattlecoder/jsfiddle/tree/master/uptoken">在线生成token</a>
    </li>
    <li>
        <label for="key">key:</label>
        <input id="key" name="key" class="ipt" value="">
    </li> -->
    <li>
        <label for="bucket">照片:</label>
        <input id="file" name="file" class="ipt" type="file" />
    </li>
    <li>
        <input id="btn_upload" type="button" value="提交">
    </li>
    <div id="progressbar"><div class="progress-label"></div></div>
</ul>
<div id="dialog" title="上传成功"></div>


<%= stylesheet_link_tag "/jquery-ui" %>
<%= javascript_include_tag "/jquery-ui" %>

<script>
/*
*   本示例演示七牛云存储表单上传
*
*   按照以下的步骤运行示例：
*
*   1. 填写token。需要您不知道如何生成token，可以点击右侧的链接生成，然后将结果复制粘贴过来。
*   2. 填写key。如果您在生成token的过程中指定了key，则将其输入至此。否则留空。
*   3. 姓名是一个自定义的变量，如果生成token的过程中指定了returnUrl和returnBody，
*      并且returnBody中指定了期望返回此字段，则七牛会将其返回给returnUrl对应的业务服务器。
*      callbackBody亦然。
*   4. 选择任意一张照片，然后点击提交即可
*
*   实际开发中，您可以通过后端开发语言动态生成这个表单，将token的hidden属性设置为true并对其进行赋值。
*
*  **********************************************************************************
*  * 贡献代码：
*  * 1. git clone [e-mail]:icattlecoder/jsfiddle
*  * 2. push代码到您的github库
*  * 3. 测试效果，访问 http://jsfiddle.net/gh/get/jquery/1.9.1/<Your GitHub Name>/jsfiddle/tree/master/ajaxupload
*  * 4. 提pr
*   **********************************************************************************
*/
$(document).ready(function() {
  var Qiniu_UploadUrl = "http://up.qiniu.com";
  var progressbar = $("#progressbar"),
      progressLabel = $(".progress-label");
      progressbar.progressbar({
      value: false,
      change: function() {
          progressLabel.text(progressbar.progressbar("value") + "%");
      },
      complete: function() {
          progressLabel.text("Complete!");
      }
  });
  $("#btn_upload").click(function() {
      //普通上传
      var Qiniu_upload = function(f, token, key) {
          var xhr = new XMLHttpRequest();
          xhr.open('POST', Qiniu_UploadUrl, true);
          var formData, startDate;
          formData = new FormData();
          if (key !== null && key !== undefined) formData.append('key', key);
          formData.append('token', token);
          formData.append('key', 'fffff2f');
          // formData.append('key', 'fffff2f');
          formData.append('file', f);
          var taking;
          xhr.upload.addEventListener("progress", function(evt) {
              if (evt.lengthComputable) {
                  var nowDate = new Date().getTime();
                  taking = nowDate - startDate;
                  var x = (evt.loaded) / 1024;
                  var y = taking / 1000;
                  var uploadSpeed = (x / y);
                  var formatSpeed;
                  if (uploadSpeed > 1024) {
                      formatSpeed = (uploadSpeed / 1024).toFixed(2) + "Mb\/s";
                  } else {
                      formatSpeed = uploadSpeed.toFixed(2) + "Kb\/s";
                  }
                  var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                  progressbar.progressbar("value", percentComplete);
                  // console && console.log(percentComplete, ",", formatSpeed);
              }
          }, false);

          xhr.onreadystatechange = function(response) {
              if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
                  var blkRet = JSON.parse(xhr.responseText);
                  console && console.log(blkRet);
                  $("#dialog").html(xhr.responseText).dialog();
              } else if (xhr.status != 200 && xhr.responseText) {

              }
          };
          startDate = new Date().getTime();
          $("#progressbar").show();
          xhr.send(formData);
      };
      var token = "<%= @uptoken %>";
      // var token = $("#token").val();
      if ($("#file")[0].files.length > 0 && token != "") {
          Qiniu_upload($("#file")[0].files[0], token, $("#key").val());
      } else {
          console && console.log("form input error");
      }
  })
})
</script>