七牛图片上传 Promise 写法-2018-8-11

upload.js

// 负责上传文件
import API_common from '@/api/common'


// 上传文件到七牛
// 这个函数用到了另外2个函数：get_upload_token, qiniu_upload
function upload(user_id, file, progress_callback){
  return new Promise(function (resolve, reject) {
    get_upload_token().then(token=>{
      resolve(token);
    }).catch(error => {
      reject(error)
    })
  }).then(token => {
    // console.log('这一步拿到 token 了');
    // console.log('是' + token);
    return qiniu_upload(token, file, user_id, progress_callback)
  })
}

// 只负责拿七牛的上传 token
// 此 token 由我们的服务端生成，包含上传策略，回调地址等等
function get_upload_token(){
  return new Promise(function (resolve, reject) {
    const QINIU_UPLOAD_TOKEN_EXPIRE_millsecond = 3600 * 1000; // 七牛上传凭证的过期时间（毫秒）
    let upload_token = localStorage.getItem("qiniu-upload-token");
    let upload_token_created_at = localStorage.getItem("qiniu-upload-token-created-at");
    var refreshToken = false; // Flag
    if (new Date().getTime() - upload_token_created_at > QINIU_UPLOAD_TOKEN_EXPIRE_millsecond) {
      refreshToken = true;
    }
    if (refreshToken) {
      var that = this;
      // 这里获得上传 token，只是发一个请求到后端拿七牛 upload token。
      API_common.getUploadToken().then(result => {
        if (result["qiniu_upload_token"]) {
          var token = result["qiniu_upload_token"];
          localStorage.setItem("qiniu-upload-token", token);
          localStorage.setItem("qiniu-upload-token-created-at",new Date().getTime());
          resolve(token);
        }
      }).catch(err => {
        reject(err)
      });
    }else{
      resolve(upload_token);
    }
  })
}

// 负责上传
function qiniu_upload(token, file, user_id, progress_callback) {
  return new Promise(function (resolve, reject) {
    var qiniu_upload_url = "https://upload-z2.qiniup.com";
    var xhr = new XMLHttpRequest();
    xhr.open("POST", qiniu_upload_url, true);
    var formData, startDate;
    formData = new FormData();
    formData.append("token", token);
    formData.append("file", file);
    formData.append("x:user_id", user_id);
    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 percentComplete = Math.round(evt.loaded * 100 / evt.total);
          progress_callback(percentComplete, uploadSpeed);
        }
      },
      false
    );
    xhr.onreadystatechange = function(response) {
      if (
        xhr.readyState == 4 &&
        xhr.status == 200 &&
        xhr.responseText != ""
      ) {
        var resp = xhr.responseText;
        var json = JSON.parse(resp);
        // 返回结果
        resolve(json);
      } else if (xhr.status != 200 && xhr.responseText) {
        // 遇到错误返回整个 xhr 对象
        reject(xhr);
      }
    };
    startDate = new Date().getTime();
    xhr.send(formData);
  })
}

// 只导出一个对外使用的 upload 函数
export { upload }

建议复制到 Visual Studio Code 里面再来看代码。
虽然 Github gist 有代码高亮。但是看起来还是觉得很费劲