上传图片到七牛云（客户端 js sdk）

大体思路

上一篇我们讲了如何通过服务器生成一个upToken，那前端拿到这个token后又该如何操作？在这里我给出一个相当简洁的版本。

首先我们来看一下上传的思路：调用七牛模块的upload方法，生成一个observable对象， observable 可观察对象，该对象通过 subscribe 订阅方法可以被 observer观察者 所订阅，订阅同时会开始触发上传。

那upload方法需要些什么参数呢？我们来理一理：

file : Blob 对象，上传的文件

key : 到时候存储成功的资源名

token : 上传凭证，上篇有讲

config : 上传配置，一般我只配一个启用cdn加速

putExtra : 额外配置，一般我只用来限制一下上传文件的类型。

Blob对象

这里着重说一下file，其实它的获取十分简单，它通过input type="file"表单DOM的files属性获得，files属性表示当前这次选择的本地文件对象集合，是一个数组。

来直观感受一下：

（代码部分）

（选择三张图片）

（控制台打印结果，这就是blob对象，包含了文件的信息）

实际操作：

回到我们的七牛云上传部分，首先，安装qiniu-js

npm i qiniu-js

然后，在需要上传的模块引入qiniu-js

import * as qiniu from 'qiniu-js';

最后，在文件选择改变事件触发时，调用以下方法：

    changeHandler(e) {

      const file = e.target.files[];

      const key = file.name;

      const token = this.qiniuToken; //从服务器拿的并存在本地data里

      const putExtra = {

        fname: '',

        params: {},

        mimeType: ['image/png', 'image/jpeg', 'image/gif'],

      };

      const config = {

        useCdnDomain: true, //使用cdn加速

      };

      const observable = qiniu.upload(file, key, token, putExtra, config);

      observable.subscribe({

        next: (result) => {

          // 主要用来展示进度

          console.warn(result);

        },

        error: () => {

          this.$notify('上传图片失败');

        },

        complete: (res) => {

          console.log(res.key);

        },

      });

    },

如此，便可成功上传。