zoukankan      html  css  js  c++  java
  • 上传图片到七牛云(客户端 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);
            },
          });
        },

      如此,便可成功上传。

  • 相关阅读:
    jQuery选择器
    有关ssh的理解
    前端WEB开发人员
    @antdesign/charts 解决echarts图宽高自适应问题,设置100%宽高显示异常
    npm run lintstaged:js报错
    node版本工具 nvm
    nginx域名隐性(地址栏域名不变)跳转
    mysql本地指定loginpath免密登录(mysql_config_editor的用法)
    Git管理查看自己是从那个分支建的分支(什么时间创建的)
    隐藏java代码中 连接数据库、redis等含密码信息方法【配置文件信息安全加密】
  • 原文地址:https://www.cnblogs.com/zhangnan35/p/11217939.html
Copyright © 2011-2022 走看看