转载请注明原文地址： 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"
}
]
}
如果遇到其他问题，可以留言，我看看我有没有遇到过
