上传图片到七牛云(客户端 js sdk)
2024-08-29 02:24:44
大体思路
上一篇我们讲了如何通过服务器生成一个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);
},
});
},
如此,便可成功上传。
最新文章
- GacUI学习(二)
- string转换成color转
- js中的运算符优先级顺序
- JCaptcha做验证码遇到的问题引出的思考
- 微软云平台媒体服务实践系列 2- 使用动态封装为iOS, Android , Windows 等多平台提供视频点播(VoD)方案
- C#读取网页源码
- Android开发系列----学习伊始
- hnnu 11546 Sum of f(x) (求一个数的全部约数和)
- Pro Aspnet MVC 4读书笔记(1) - Your First MVC Application
- ASP.NET MVC 5 基本构成
- Linux 中Ctrl + s 的作用
- Confluence 6 订阅所应用的所有小工具
- ubuntu14.06 Lts开启ssh服务
- Eclipse使用心得与技巧
- 自定义指令 格式化input数据为非负整数
- ThreaLocal
- cmd乱码问题
- jxl(Java Excel API) 使用方法 【1】
- 使用向量化的 if:ifelse
- 20155311《Java程序设计》实验五(网络编程与安全)实验报告