更好用的七牛云存储 JS SDK，因为官方的太难用

iKcamp 发布于2019-08-22 10:39 / 1454人阅读

摘要：目前可能是七牛浏览器文件上传的最好实现。任务拦截器拦截任务返回，任务将会从任务队列中剔除，不会被上传中断任务，返回，任务队列将会在这里中断，不会执行上传操作。请上传小于的文件你可以添加多个任务拦截器选择上传文件确定后该生命周期函数会被回调。

qiniu4js

qiniu4js目前可能是七牛JavaScript浏览器文件上传的最好实现。

使用TypeScript编写，不依赖任何三方库，纯代码不包含任何界面元素，使用HTML5 文件API上传(目前和未来不会支持HTML4以及FLASH)。

支持UMD模块导入。

已完成

[x] 文件直传

[x] 分块上传

[x] 多文件上传

[x] token共享

[x] 自动重传

[x] 任务拦截器

[x] 文件过滤

[x] 多实例(可以创建多个上传实例,互不影响)

待完成

[ ] 自定义变量

[ ] 图片裁剪

[ ] 图片质量压缩

[ ] 使用七牛API进行图片处理

安装

sudo npm install qiniu4js --save

导入 浏览器

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

云服务器私有云七牛云官方七牛云官方网站七牛云官方网七牛云存储

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91016.html

七牛云存储---JavaScript SDK 简单上传，走过的几个坑

摘要：和七牛账号里面提供。自己设定的七牛云存储空间名，创建存储空间的时候注意地区应该默认是华东，不一样地区需要修改下里面指定的上传的域名，请去参考官方文档。若开启该选项，为自动生成上传成功后的文件名。先放上几个用到的七牛官方网站： JavaScript SDK地址需要在页面中先引入 plupload 提供的 plupload.full.min.js（生产环境）然后再引入SDK里的 qini...

or0fun 2019-08-20 15:19 评论0 收藏0
记录一下前端分片上传七牛云踩过的坑

摘要：后来查阅了资料后自己手动实现了文件切片上传到服务器基本需求已经实现，但由于效率及稳定性问题后来决定还是直传文件到七牛云。总结起来七牛云上传的套路就是后台为你提供或者获取的接口地址之后上传的时候要带上这个。起因最近在工作中有个上传大文件的需求，原先咨询过组里的大佬给我推荐了百度的webupload，但后来引入之后发现它是基于jquery封装的。由于本身项目是基于vue开发的所以与j...

ISherry 2019-08-21 11:51 评论0 收藏0
Laravel中前端js上传图片到七牛云

摘要：以下中使用浏览器端上传图片到七牛云，下面只是做一些简单的流程实例。你的控制器地址请求成功之后，调用刚刚写好的方法，把传入过去让页面初始化的时候就请求这里差不多就可以啦，更多的操作参考文档七牛云官方文档以下Laravel中使用浏览器端上传图片到七牛云，下面只是做一些简单的流程实例。详情请看官方文档七牛云官方js文档 1. 首先引入相应的js文件，下面是通过CDN引入的Staticfi...

jollywing 2019-08-20 19:08 评论0 收藏0
Laravel中前端js上传图片到七牛云

摘要：以下中使用浏览器端上传图片到七牛云，下面只是做一些简单的流程实例。你的控制器地址请求成功之后，调用刚刚写好的方法，把传入过去让页面初始化的时候就请求这里差不多就可以啦，更多的操作参考文档七牛云官方文档以下Laravel中使用浏览器端上传图片到七牛云，下面只是做一些简单的流程实例。详情请看官方文档七牛云官方js文档 1. 首先引入相应的js文件，下面是通过CDN引入的Staticfi...

EscapedDog 2019-06-28 13:39 评论0 收藏0
试用七牛云储存

摘要：以前我的各种服务器都是通过这个用写的工具去将指定的目录同步备份到然后在用一个脚本通过去定时执行以达到每天自动压缩备份数据然后传送到上去的效果但是如此有一个副作用那就是虽然我的各种服务器都是在海外连接速度贼快但是俺肉身在天朝每次从上把数据拉回https://segmentfault.com/a/以前我的各种服务器都是通过s3rsync这个用 Ruby 写的工具去将指定的目录同步备份到 Amaz...

546669204 2019-05-23 19:43 评论0 收藏0