qiniu4js
qiniu4js现在多是七牛JavaScript浏览器文件上传的最好完成。
运用TypeScript编写,不依赖任何三方库,纯代码不包含任何界面元素,运用HTML5 文件API上传(现在和将来不会支撑HTML4以及FLASH)。
支撑UMD模块导入。
已完成
[x] 文件直传
[x] 分块上传
[x] 多文件上传
[x] token同享
[x] 自动重传
[x] 使命阻拦器
[x] 文件过滤
[x] 多实例(能够建立多个上传实例,互不影响)
待完成
[ ] 自定义变量
[ ] 图片裁剪
[ ] 图片质量紧缩
[ ] 运用七牛API举行图片处置惩罚
装置
sudo npm install qiniu4js --save
导入
浏览器
<script src="qiniu4js.js"></script>
es6
import {UploaderBuilder} from 'Qiniu'
CommonJS
{UploaderBuilder} = require('Qiniu')
运用要领
//构建uploader实例
let uploader = new Qiniu.UploaderBuilder()
.debug(false)//开启debug,默许false
.domain("http://img.yourdomain.com")//默许为http://upload.qiniu.com
.retry(0)//设置重传次数,默许0,不重传
.size(1024*1024)//分片大小,最多为4MB,单元为字节,默许1MB
.chunk(true)//是不是分块上传,默许true,当chunk=true而且文件大于4MB才会举行分块上传
.auto(true)//选中文件后马上上传,默许true
.multiple(true)//是不是支撑多文件选中,默许true
.accept(['.gif','.png','video/*'])//过滤文件,默许无,细致设置见http://www.w3schools.com/tags/att_input_accept.asp
.tokenShare(true)//在一次上传行列中,是不是分享token,假如为false每上传一个文件都须要要求一次Token,默许true
.tokenFunc(function (setToken,task) {
//token猎取函数,token猎取完成后,必需挪用`setToken(token);`不然上传使命不会实行。
setTimeout(function () {
setToken("token");
}, 1000);
})
//使命阻拦器
.interceptor({
//阻拦使命,返回true,使命将会从使命行列中剔除,不会被上传
onIntercept: function (task) {
return task.file.size > 1024 * 1024;
},
//中缀使命,返回true,使命行列将会在这里中缀,不会实行上传操纵。
onInterrupt: function (task) {
if (this.onIntercept(task)) {
alert("请上传小于1m的文件");
return true;
}
else {
return false;
}
},
}
//你能够增添多个使命阻拦器
.interceptor({...})
.listener({
onReady(tasks) {
//挑选上传文件肯定后,该性命周期函数会被回调。
},onStart(tasks){
//最先上传
},onTaskGetKey(task){
//为每个上传的文件指定key,假如不指定则由七牛服务器自行处置惩罚
return "test.png";
},onTaskProgress: function (task) {
//每个使命的上传进度,经由过程`task.progress`猎取
console.log(task.progress);
},onTaskSuccess(task){
//一个使命上传胜利后回调
},onTaskFail(task) {
//一个使命在阅历重传后依旧失利后回调此函数
},onTaskRetry(task) {
//最先重传
},onFinish(tasks){
//一切使命完毕后回调,注重,完毕不等于都胜利,该函数会在一切HTTP上传要求相应后回调(包含重传要求)。
}}
}).build();
//假如auto设置为false,则须要手动启动上传。
//uploader.start();
//因为平安缘由,display:none的file input,没法经由过程代码挪用click要领,必需经由过程以下处置惩罚,让用户来完成click,从而翻开文件挑选窗口:
//你能够自行监听HTML元素的click事宜,在回调函数内部翻开文件挑选窗口。你也能够运用jQuery监听,下面运用的是原生的JavaScript的体式格局。
button = document.getElementById('button');
button.addEventListener("click", function () {
uploader.chooseFile();
}
版本申明
0.0.9 (2016-10-21)
分块上传,自定义上传域名
0.0.8 (2016-10-19)
fix bug,当没有选中任何文件的时刻,会触发上传函数。
0.0.7 (2016-10-19)
替换上传域名为upload.qiniu.com
0.0.6 (2016-10-19)
绕过缓存,防止每次都上传一样的文件。
0.0.5 (2016-10-19)
tokenFunc(setToken,task)增添task参数
0.0.4 (2016-10-19)
修复了一个关于accept选项的bug。
0.0.3 (2016-10-19)
使命阻拦器完成。
0.0.2 (2016-10-19)
基本功能的完成。
维护人
知乎 : @面条
Github : @lsxiao
开源允许
MIT