24. JS | 七牛云上传图片视频

“无言独上西楼，月如钩，寂寞梧桐深院锁清秋。剪不断，理还乱，是离愁，别是一般滋味在心头。”
—— 题记，引自《相见欢》

正文

---

最近新写个项目，需要上传视频，用了七牛的JavaScriptSDK，七牛云文档其实讲的很清楚，引用代码记录下。

Paste_Image.png

      var option1 = {
        runtimes: 'html5,flash,html4',
        browse_button: 'pickfiles',
        container: 'container',
        drop_element: 'container',
        max_file_size: '1000mb',
        filters : { mime_types: [ {title: "Video files", extensions : "flv,mpg,mpeg,avi,wmv,mov,asf,rm,rmvb,mkv,m4v,mp4"}] },
        flash_swf_url: '/static/js/Moxie.swf',
        dragdrop: true,
        chunk_size: '4mb',
        multi_selection: false,
        uptoken_func: function(){
          var ajax = new XMLHttpRequest();
          ajax.open('GET', location.origin + '/cloud/video/uploadtoken', false);
          ajax.setRequestHeader("If-Modified-Since", "0");
          ajax.send();
          if (ajax.status === 200) {
            var res = JSON.parse(ajax.responseText);
            console.log(res)
            if (res.data && res.data.video && res.data.video.qiniu) {
              var token = res.data.video.qiniu.upToken; 
              console.log(res.data);
              self.keys = res.data.video.qiniu.key;
              return token;
            }
            return '';
          }
        },
        domain: 'http://video01.jiuyan.info/',
        get_new_uptoken: false,
        auto_start: true,
        log_level: 5,
        init: {
          'FilesAdded': function(up, files) {
            $('table').show();
            plupload.each(files, function(file) {
              var progress = new FileProgress(file, 'fsUploadProgress');
              progress.setStatus("等待...");
              progress.bindUploadCancel(up);
            });
          },
          'BeforeUpload': function(up, file) {
            var progress = new FileProgress(file, 'fsUploadProgress');
            var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
            if (up.runtime === 'html5' && chunk_size) {
                progress.setChunkProgess(chunk_size);
            }
          },
          'UploadProgress': function(up, file) {
            var progress = new FileProgress(file, 'fsUploadProgress');
            var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
            progress.setProgress(file.percent + "%", file.speed, chunk_size);
            console.log(file)
          },
          // 'UploadComplete': function() { $('#success').show(); },
          'FileUploaded': function(up, file, info) {
            // var k = info;
            self.video_info = info;
            var cover_info = $.parseJSON(info)

            // self.data.video_hash = k.hash;
            console.log(info)

            // console.log(info.key)
            // console.log(k.key)

            // console.log(self.data.video_info)

            console.log('success')
            var progress = new FileProgress(file, 'fsUploadProgress');
            progress.setComplete(up, info);
            $('#pickfiles span').html('重新上传')
          },
          'Error': function(up, err, errTip) {
            $('table').show();
            var progress = new FileProgress(err.file, 'fsUploadProgress');
            progress.setError();
            progress.setStatus(errTip);
          },
          'Key': function(up, file) {
            var key = self.keys.shift();
            // do something with key
            return key
          }
        }
      }
      var uploader = Qiniu.uploader(option1);

      uploader.bind('FileUploaded', function() {
        console.log('hello man,a file is uploaded');
      });

      var Qiniu2 = new QiniuJsSDK();
      var option2 = {
        runtimes: 'html5,flash,html4',
        browse_button: 'info-cover',
        container: 'container',
        drop_element: 'container',
        max_file_size: '1000mb',
        filters : { mime_types: [ {title: "Image files", extensions : "jpg,png,jpeg"}] },
        flash_swf_url: '/static/js/Moxie.swf',
        dragdrop: true,
        chunk_size: '4mb',
        multi_selection: false,
        uptoken_func: function(){
          var ajax = new XMLHttpRequest();
          ajax.open('GET', location.origin + '/cloud/video/uploadtoken', false);
          ajax.setRequestHeader("If-Modified-Since", "0");
          ajax.send();
          if (ajax.status === 200) {
            var res = JSON.parse(ajax.responseText);
            if (res.data && res.data.cover && res.data.cover.qiniu) {
              var token = res.data.cover.qiniu.upToken;
              console.log(res.data) 
              self.coverkeys = res.data.cover.qiniu.key;
              return token;
            }
            return '';
          }
        },
        domain: 'http://inimg01.jiuyan.info/',
        get_new_uptoken: false,
        auto_start: true,
        log_level: 5,
        init: {
          'FilesAdded': function(up, files) {
          },
          'BeforeUpload': function(up, file) {
          },
          'UploadProgress': function(up, file) {
          },
          // 'UploadComplete': function() { $('#success').show(); },
          'FileUploaded': function(up, file, info) {
            // var k = info;
            self.cover_info = info;
            console.log(info)
            var result_url = up.getOption('domain') + $.parseJSON(info).key
            document.getElementById('loader-wrap').className = 'loader-wrap'
            var coverWrap = document.getElementById('cover-wrap')
            coverWrap.style.backgroundImage = "url(" + result_url + ")";
            self.isActive = true;
            console.log('success')
          },
          'Error': function(up, err, errTip) {
          },
          'Key': function(up, file) {
            var key = self.coverkeys.shift();
            // // do something with key
            return key
          }
        }
      }
      var uploader2 = Qiniu2.uploader(option2);

      uploader2.bind('FileUploaded', function() {
        console.log('hello man 2,a file is uploaded');
      });

      $('#info-cover').on('click', function(){
        uploader2.start();
      });

参考文章：
https://developer.qiniu.com/kodo/sdk/javascript#8