1.引入相关插件
<script src="//cdn.staticfile.org/plupload/2.1.2/plupload.full.min.js"></script>
<script src="//cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>
2.实力化上传插件
<script type="text/javascript">
var token = "{{$token}}"; //获取上传凭证token
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4', //上传模式,依次退化
container: 'container', //上传区域DOM ID，默认是browser_button的父元素，
browse_button: 'upload', //上传选择的点选按钮，**必需** id
drop_element: 'container', //拖拽区域,以上这三个属性都是字符串类型
uptoken: token,
domain: 'airlink', //bucket 域名，下载资源时用到，**必需**
get_new_uptoken: false, //设置上传文件的时候是否每次都重新获取新的token
max_file_size: '500mb', //最大文件体积限制
max_retries: 3, //上传失败最大重试次数
chunk_size: '10mb', //分块上传时，每片的体积
flash_swf_url: '/js/plupload/Moxie.swf', // flash的相对地址
auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传
unique_names: true, //设置所有文件名唯一
multi_selection: false, //不允许多选
filters: {
mime_types: [ //只允许上传图片
{
title: "Image files",
extensions: "exe"
}
],
prevent_duplicates: true, //不允许选取重复文件
max_file_size: '500mb'
},
resize: { //对上传的图片进行压缩
width: 1080, // 宽
height: 500, // 高
quality: 80, // 压缩质量，只对jpg格式的图片有效，默认为90，100为不压缩，越大质量越好
crop: false // 是否裁剪图片
},
init: {
//选择文件
'FilesAdded': function (up, files) {
console.log(files);
files = files[0];
console.log(files.name);
size = conver(files.size);
$('.file-zone').css('display','block')
$('#fsUploadProgress').find('tr').remove();
html= `<tr id="o_1drl54r9d1rubvfeds2nj8ag9a" class="progressContainer"style="opacity: 1;">
<td class="progressName">`+files.name+` </td>
<td class="progressFileSize">`+size+`</td>
<td id="o_1drl54">
<div class="progress">
<div class="progress-bar" id='progress-bar' role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
</td>
</tr>`
$('#fsUploadProgress').append(html);
// 选择文件后的回调
// files为本次添加的图片列表，files[0].getNative()可以获取原生文件对象
},
'BeforeUpload': function (up, file) {
// 每个文件上传前,处理相关的事情
},
//文件上传中
'UploadProgress': function (up, file) {
console.log(file.percent)
document.getElementById('progress-bar').style.width = file.percent+'%';
document.getElementById('progress-bar').innerHTML = file.percent+'%';
// 每个文件上传时,处理相关的事情
},
//文件上传完成
'FileUploaded': function (up, file, info) {
var box = document.getElementById('o_1drl54');
console.log(box);
box.innerHTML ="上传完成";
// 每一张图片上传完成后的回调
// 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 = 'http://download.timelink.cn/' + info.key; // 获取到图片的七牛url
console.log(src);
$('#name').val(file.name);
$('#path').val(src);
var stamp = document.getElementById("submit");//设置按钮可用
stamp.disabled = false;
},
'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);
