大体思路

  上一篇我们讲了如何通过服务器生成一个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[];
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);
},
});
},

  如此,便可成功上传。

上传图片到七牛云(客户端 js sdk)的更多相关文章

  1. 上传图片到七牛云(服务端 node.js sdk)

    大体思路 前端要上传图片到七牛云,需要有一个token进行授权操作,而获取这个上传的upload token(以下简称upToken),在服务端需要一定的身份校验,比如说:只有登录的vip用户才能拿到 ...

  2. js上传图片到七牛云存储

    项目开发过程中遇到一个需求,运营人员需要上传图片到七牛云,最开始的做法是,后台对接七牛,然后出一个接口,前端调用接口,先将图片传到后台,然后后台再上传七牛云,用的过程中发现,图片小的情况下还好,图片一 ...

  3. ueditor上传图片到七牛云存储(form api,java)

    转:http://my.oschina.net/duoduo3369/blog/174655 ueditor上传图片到七牛云存储 ueditor结合七牛传图片 七牛的试炼 开发前的准备与注意事项说明 ...

  4. 七牛云存储Python SDK使用教程 - 上传策略详解

    文 七牛云存储Python SDK使用教程 - 上传策略详解 七牛云存储 python-sdk 七牛云存储教程 jemygraw 2015年01月04日发布 推荐 1 推荐 收藏 2 收藏,2.7k  ...

  5. TP5上传图片到七牛云,并且删除七牛云的图片

    一,通过composer 下载七牛云 sdk composer require qiniu/php-sdk 二,手动下载七牛云sdk 1,https://developer.qiniu.com/kod ...

  6. UEditor上传图片到七牛云储存(c#)

    我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...

  7. UEditor上传图片到七牛云储存(java)

    我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...

  8. 七牛云实现js上传

    七牛云的官方API写的一塌糊涂.最主要的,还是版本兼容的问题. 一.引入文件 引入了两个文件: 1.jquery-1.10.2.min.js 2.plupload.full.min.js 3.qini ...

  9. 在node中使用promise上传图片到七牛云

    为了分摊个人服务器压力.提升图片下载上传的速度,使用七牛云保存用户上传的图片. 后台基于express搭建的,上传使用七牛云第三方nodejs-sdk.由于七牛云上传图片只能单个进行,并且考虑到上传完 ...

随机推荐

  1. docker 常用命令 以及常见问题

    常见命令 windos 在搜索框 输入 windows powershell,打开.然后输入以下命令#查看镜像列表 docker images ls #删除单个镜像 docker rmi image- ...

  2. Oracle 创建用户,赋予指定表名/视图只读权限

    步骤指南 创建用户 格式:; 语法:create user 用户名 identified by 密码; 注:密码不行的话,前后加(单引号):' create user TEST identified ...

  3. 1w+的心路历程

    鬼知道我是如何坚持下来的,如果非要找个理由,那或许是所谓的热爱. 公众号转眼间写了三年.写的内容围绕着安卓技术,源码剖析,生活感悟,职场人生. 很庆幸的是,得到大家的支持,每一条留言都会是一次交流,看 ...

  4. 精通awk系列(13):print、printf、sprintf和重定向

    回到: Linux系列文章 Shell系列文章 Awk系列文章 输出操作 awk可以通过print.printf将数据输出到标准输出或重定向到文件. print print elem1,elem2,e ...

  5. ASP.NET Core on K8S深入学习(11)K8S网络知多少

    本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章. 一.Kubernetes网络模型 我们都知道Kubernetes作为容器编排引 ...

  6. Python活力练习Day4

    Day4:将列表的值按相反顺序依次输出         eg :  input : list = [1,2,3,4,5] output : [5,4,3,2,1] 方法一:时间复杂度O(n),其中 n ...

  7. linux服务器JDK1.8环境变量配置

    1. 场景描述 软件老王年龄大了,新机器(Linxu)下,配置JDK环境变量老记不住,记录下,有需要的朋友参考下. 2. 解决方案 2.1 上传tar包 ftp上传tar包: jdk-8u181-li ...

  8. Python项目搬迁,快捷导出环境依赖包到requirements.txt

    项目搬迁的时候,需要把当前的环境依赖包导出,然后到部署项目的服务器上安装依赖. 我们可以通过下面的命令执行,把依赖包导出到requirements.txt文件里. 生成requirements.txt ...

  9. Localize UI Elements 汉化界面(本地化)

    In this lesson, you will learn the basics of localizing visible UI elements. By default, the applica ...

  10. RSA加解密&RSA加验签详解

    RSA 加密算法是目前最有影响力的 公钥加密算法,并且被普遍认为是目前 最优秀的公钥方案 之一.RSA 是第一个能同时用于 加密 和 数字签名 的算法,它能够 抵抗 到目前为止已知的 所有密码攻击,已 ...