关于图片上传点击按钮响应慢以及无法进入taskSuccess的问题

[millzhang]

基本环境是基于vue+webpack,代码如下:

//构建uploader实例
      let uploader = new UploaderBuilder()
        .debug(true) //开启debug，默认false
        .domain("这边用的是自己的域名") //默认为http://upload.qiniu.com
        .retry(0) //设置重传次数，默认0，不重传
        .size(1024 * 1024) //分片大小，最多为4MB,单位为字节,默认1MB
        .chunk(true) //是否分块上传，默认true，当chunk=true并且文件大于4MB才会进行分块上传
        .auto(true) //选中文件后立即上传，默认true
        .multiple(true) //是否支持多文件选中，默认true
        .accept(['image/*']) //过滤文件，默认无，详细配置见http://www.w3schools.com/tags/att_input_accept.asp
        .tokenShare(true) //在一次上传队列中，是否分享token,如果为false每上传一个文件都需要请求一次Token，默认true
        .tokenFunc(function(setToken, task) {
          //token获取函数，token获取完成后，必须调用`setToken(token);`不然上传任务不会执行。
          setTimeout(function() {
            setToken("KPDq_pMfalURw4e_ygOklluZIHnOXm5JZis_TfhL:As-NORVVTDLzn5aDCnBIkU6tpRY=:eyJzY29wZSI6InBob3RvcyIsImRlYWRsaW5lIjoxNDg2MTA0NjE2fQ==");
          }, 1000);
        })
        //任务拦截器
        .interceptor({
          //拦截任务,返回true，任务将会从任务队列中剔除，不会被上传
          onIntercept: function(task) {
            return task.file.size > 1024 * 1024;
          },
          //中断任务，返回true，任务队列将会在这里中断，不会执行上传操作。
          onInterrupt: function(task) {
            if (this.onIntercept(task)) {
              alert("请上传小于1m的文件");
              return true;
            } else {
              return false;
            }
          },
        })
        .listener({
          onReady(tasks) {
            //选择上传文件确定后,该生命周期函数会被回调。

          },
          onStart(tasks) {
            //开始上传

          },
          onTaskProgress: function(task) {
            //每一个任务的上传进度,通过`task.progress`获取
            console.log(task.progress);
          },
          onTaskSuccess(task) {
            console.log(task.result.key); //文件的key
            console.log(task.result.hash); //文件hash
          },
          onTaskFail(task) {
            //一个任务在经历重传后依然失败后回调此函数

          },
          onTaskRetry(task) {
            //开始重传

          },
          onFinish(tasks) {
            //所有任务结束后回调，注意，结束不等于都成功，该函数会在所有HTTP上传请求响应后回调(包括重传请求)。
            console.log(tasks);
          }
        }).build();

      let buttonList = document.getElementsByClassName('ca-picture-item');
      for (let i = 0; i < buttonList.length; i++) {
        let button = buttonList[i];
        button.addEventListener("click", function() {
          uploader.chooseFile();
        });
      }
    }

第一个问题就是:在点击上传按钮时响应较慢,大概3s;无论是1个或者12个button的遍历添加事件,都慢,故跟button数量应该无关,可排除 第二个问题: 上传日志如上图,出现404导致无法代码无法进入taskSuccess里,不知何故,试过两个版本,分别是1.0.6和1.0.7.这边其实图片在七牛端是已经有了的可以查看. 谢谢!

[Sloaix]

晚上回去看下，今天才上班。

[millzhang]

有什么进展么?七牛js-sdk对模块化支持真的不好,官方貌似也没有好的解决方案.你这套估计是最好的能使用在模块化环境中的上传方案了.求解惑,谢谢!

[Sloaix]

刚才合并了一些pr，现在在调试。

pr里面有一个新增功能，可以自定义上传按钮。

我看今天下班前发个新版本上去。到时候@你

至于你说的第二个问题，我看这个域名貌似不是七牛的域名，不知道是不是你的自定义域名？错误是出在options 方法上，不知道你清不清楚cors跨域机制，在发起正式的post请求前，会先进行options请求服务器，服务器会返回response，浏览器根据response判断是否有跨域权限进行post操作。

你这个好像请求权限的时候出现了问题，具体原因还要你自己进行排查。

可以参考这个issues，或许会有帮助 https://github.com/lsxiao/qiniu4js/issues/4

cors跨域参考阮一峰的博客：http://www.ruanyifeng.com/blog/2016/04/cors.html

@MillZhang

[millzhang]

好的,第二个问题我了解了,辛苦了,感谢!

[Sloaix]

release 1.0.8.