七牛JavaScript SDK与Plupload的配合使用

转载请注明原文地址： http://www.jianshu.com/p/6742c4746421

先丢两个官方文档链接

七牛JavaScript SDK https://developer.qiniu.com/kodo/sdk/1283/javascript
Plupload http://www.plupload.com/docs/

开发中经常会遇到要上传图片的要求，比如上传头像什么的，这里就介绍一下七牛jssdk和plupload的配合使用

准备与安装

需要服务端配置好uptoken，这是七牛的上传凭证，但是我这里不讲这个，可以看官方文档
使用npm、bower等安装好qiniu-js和plupload，或者直接使用CDN上的文件
在页面中引入plupload.full.min.js和qiniu.min.js

注意

两者配合使用的话只支持IE9+
IE9不支持html5方式上传，可以使用flash上传，需要引入plupload中自带的Moxie.swf文件
不要使用高版本的plupload，否则会报Moxie未定义，原因是高版本的plupload取消了Moxie，但是七牛的sdk貌似没有跟上
plupload.full.min.js、qiniu.min.js、Moxie.swf的版本不对应可能导致flash上传无法使用，可以参考下面代码的版本

<script src="//cdn.staticfile.org/plupload/2.1.2/plupload.full.min.js"></script>
<script src="/js/plupload/zh_CN.js"></script>  <!-- 语言包 -->
<script src="//cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>

使用

直接上代码

// 配置plupload
var uploader = Qiniu.uploader({
    runtimes: 'html5,flash,html4', //上传模式,依次退化
    container: 'container', //上传区域DOM ID，默认是browser_button的父元素，
    browse_button: 'btn', //上传选择的点选按钮，**必需**
    drop_element: 'container', //拖拽区域,以上这三个属性都是字符串类型
    uptoken: uptoken,
    domain: 'jb-medical', //bucket 域名，下载资源时用到，**必需**
    get_new_uptoken: false, //设置上传文件的时候是否每次都重新获取新的token
    max_file_size: '5mb', //最大文件体积限制
    max_retries: 3, //上传失败最大重试次数
    chunk_size: '4mb', //分块上传时，每片的体积
    flash_swf_url: '/js/plupload/Moxie.swf', // flash的相对地址
    auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传
    unique_names: true, //设置所有文件名唯一
    multi_selection: false, //不允许多选
    filters: {
        mime_types: [ //只允许上传图片
            {
                title: "Image files",
                extensions: "jpg,jpeg,gif,png"
            }
        ],
        prevent_duplicates: true, //不允许选取重复文件
        max_file_size: '5mb'
    },
    resize: { //对上传的图片进行压缩
        width: 1080, // 宽
        height: 500, // 高
        quality: 80, // 压缩质量，只对jpg格式的图片有效，默认为90，100为不压缩，越大质量越好
        crop: false // 是否裁剪图片
    },
    init: {
        'FilesAdded': function(up, files) {
            // 选择文件后的回调
            // files为本次添加的图片列表，files[0].getNative()可以获取原生文件对象
        },
        'BeforeUpload': function(up, file) {
            // 每个文件上传前,处理相关的事情
        },
        'UploadProgress': function(up, file) {
            // 每个文件上传时,处理相关的事情
        },
        'FileUploaded': function(up, file, info) {
            // 每一张图片上传完成后的回调
            // info中为七牛返回的相关信息，为一个json字符串，比如下面这个
            // "{"bucket":"jb-medical","colorModel":"ycbcr","duration":null,"fname":"0544577b91a59efaf39fea77e11dda4a.jpg","format":"jpeg","fsize":92380,"hash":"FquL9DHBuzzlR5V-v0TOn4bCQxIf","height":675,"key":"o_1bhegvmtvk64inehuv1qvf17dro.jpg","size":null,"url":"https://oi3o224r8.qnssl.com","width":1080}"
            info = JSON.parse(info);  // 转成json
            var src = info.url + '/' + info.key;  // 获取到图片的七牛url
        },
        'Error': function(up, err, errTip) {
            // 错误回调，具体的code见Plupload文档，如果引入了语言包，errTip会是对应语言的错误提示
            if (err.code == -600) {
                // size超过5m
                alert('每张图片大小请勿超过5M')
            } else {
                alert(errTip)
            }
        },
        'UploadComplete': function(up, file) {
            //队列文件处理完毕后,处理相关的事情
        }
    }
})

会用到的大概就这些了，其他的可以去看官方文档

注意点

如果设置为不自动上传，则需要用js手动启动上传

uploader.start();

文件的删除和添加

uploader.removeFile(file);
uploader.addFile(file);

文件操作方法

如果页面上有多个上传图片的地方，则需要初始化多个upload
在Android微信中存在选取完图片后没有响应的bug
这是由于设置了filters导致的，具体原因未知，去掉下面这块代码试试

filters: {
        mime_types: [ //只允许上传图片
            {
                title: "Image files",
                extensions: "jpg,jpeg,gif,png"
            }
        ]
}

如果遇到其他问题，可以留言，我看看我有没有遇到过

七牛JavaScript SDK与Plupload的配合使用

准备与安装

使用

注意点

推荐阅读更多精彩内容