上传图片到七牛云(客户端 js sdk)

大体思路

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

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

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

    fileBlob 对象,上传的文件

    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[0];
      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);
        },
      });
    },

  如此,便可成功上传。

 

posted @ 2019-07-22 14:03  陌上兮月  阅读(8510)  评论(1编辑  收藏  举报