七牛图片上传 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 }

这是什么？

一段 Javascript 代码，用于上传文件到七牛

这段代码存在的意义？

让上传文件到七牛非常方便，要写的代码很少

为什么公布出来？

希望节省其他程序员的时间

使用方法

需要3个 input：用户 ID，文件，有进度时会调用的回调函数

      upload([用户id], [文件], [有进度时会调用的回调函数]).then(function(result){
        console.log('结果是: ');
        console.log(result);
      }).catch(err=>{
        console.log('遇到了错误，错误是');
        console.log(err);
      });

使用步骤

把如上 gist 代码保存到一个 upload.js 文件里
需要时先引入

    import { upload }   from '你存放的路径'

然后这样用：

      // 先写一个 progress 函数
      function progress(progress, speed){
        console.log('进度是: ');
        console.log(progress);
        console.log('速度是: ');
        console.log(speed);
      }
     // 传入用户 ID ，文件,  Progress 函数
      upload(user_id, file, progress).then(function(result){
        console.log('结果是: ');
        console.log(result);
       // 成功后
      }).catch(err=>{
       // 失败后
        console.log('遇到了错误，错误是');
        console.log(err);
      });

我只是写了代码之后顺带发出来。仅供参考。

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