技术分享

七牛JavaScript SDK与Plupload的配合使用

2017-05-31  本文已影响181人  逗比二二二

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

先丢两个官方文档链接

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

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

准备与安装

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

注意

<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) {
            //队列文件处理完毕后,处理相关的事情
        }
    }
})

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

注意点

  1. 如果设置为不自动上传,则需要用js手动启动上传
uploader.start();
  1. 文件的删除和添加
uploader.removeFile(file);
uploader.addFile(file);
文件操作方法
  1. 如果页面上有多个上传图片的地方,则需要初始化多个upload
  2. 在Android微信中存在选取完图片后没有响应的bug
    这是由于设置了filters导致的,具体原因未知,去掉下面这块代码试试
filters: {
        mime_types: [ //只允许上传图片
            {
                title: "Image files",
                extensions: "jpg,jpeg,gif,png"
            }
        ]
}

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

上一篇下一篇

猜你喜欢

热点阅读