引入
支持以下几种安装方式
直接使用静态文件地址:
https://cdnjs.cloudflare.com/ajax/libs/qiniu-js//qiniu.min.js
通过sctipt标签引入该文件,会在全局生成名为 qiniu 的对象
使用 NPM 安装
NPM 的全称是 Node Package Manager,是一个 NodeJS 包管理和分发工具,已经成为了非官方的发布 Node 模块(包)的标准。如果需要更详细的关于 NPM 的使用说明,您可以访问 NPM 官方网站,或对应的中文网站
npm install qiniu-js
const qiniu = require('qiniu-js')
// or
import * as qiniu from 'qiniu-js'
通过源码编译
git clone git@github.com:qiniu/js-sdk.git,进入项目根目录执行 npm install ,执行 npm run build,即可在dist 目录生成 qiniu.min.js。
let config = {
useCdnDomain: true, // 表示是否使用 cdn 加速域名,为布尔值,true 表示使用,默认为 false。
region: qiniu.region.z2 // 上传域名区域(z1为华北),当为 null 或 undefined 时,自动分析上传域名区域
};
let putExtra = {
fname: "", // 文件原文件名
params: {}, // 放置自定义变量: 'x:name': 'sex'
mimeType: null // 限制上传文件类型,为 null 时表示不对文件类型限制;限制类型放到数组里: ["image/png", "image/jpeg", "image/gif"]
};
/*
bucket: 上传的目标空间
file: File 对象,上传的文件
key: 文件资源名
token: 上传验证信息,前端通过接口请求后端获得
config: object,其中的每一项都为可选
*/
// qiniu.upload(file: File, key: string, token: string, putExtra?: object, config?: object): observable
const observable = qiniu.upload(file, key, token, putExtra, config)
const subscription = observable.subscribe({
next: (result) => {
// 接收上传进度信息,result是带有total字段的 Object
// loaded: 已上传大小; size: 上传总信息; percent: 当前上传进度
console.log(result); // 形如:{total: {loaded: 1671168, size: 2249260, percent: 74.29856930723882}}
// this.percent = result.total.percent.toFixed(0);
},
error: (errResult) => {
// 上传错误后失败报错
console.log(errResult)
this.message.error('上传失败');
},
complete: (result) => {
// 接收成功后返回的信息
console.log(result); // 形如:{hash: "Fp5_DtYW4gHiPEBiXIjVsZ1TtmPc", key: "%TStC006TEyVY5lLIBt7Eg.jpg"}
if (result.key) {
this.message.success('上传成功');
}
}
}) // 上传开始
// or
const subscription = observable.subscribe(next, error, complete) // 这样传参形式也可以
subscription.unsubscribe() // 上传取消