1.為什么用plupload.js
首先使用這個(gè)plupload是因?yàn)槲也捎玫?【阿里云 服務(wù)端簽名后直傳】，使用的是這個(gè)方法痘拆。
放上阿里云的地址：https://help.aliyun.com/document_detail/31926.html?spm=a2c4g.11174283.6.634.PYDsbd
2.關(guān)于plupload.js
大致有以下幾個(gè)參數(shù)：
runtimes: 'html5,flash,silverlight,html4', // 用來指定上傳方式
browse_button: 'selectfiles', // 觸發(fā)文件選擇對(duì)話框的DOM元素
multi_selection: false, // 是否可以在文件瀏覽對(duì)話框中選擇多個(gè)文件仰禽，true為可以，false為不可以
container: document.getElementById('container'), // 用來指定Plupload所創(chuàng)建的html結(jié)構(gòu)的父容器
url: '*******', // 服務(wù)器端接收和處理上傳文件的腳本地址
filters: {
mime_types: [ // 用來限定上傳文件的類型
{ title: "Image files", extensions: "jpg,jpeg,gif,png,bmp" },
],
max_file_size: '10mb', // 用來限定上傳文件的大小
prevent_duplicates: true, // 是否允許選取重復(fù)的文件纺蛆，為true時(shí)表示不允許吐葵，為false時(shí)表示允許，默認(rèn)為false桥氏。如果兩個(gè)文件的文件名和大小都相同温峭，則會(huì)被認(rèn)為是重復(fù)的文件
},
resize: { // 壓縮
width：1000，
height：800字支，
crop: false,
quality: 90,
preserve_headers: false
},
大致的事件：
Init // 當(dāng)Plupload初始化完成后觸發(fā)
PostInit // 當(dāng)Init事件發(fā)生后觸發(fā)
FilesAdded // 當(dāng)文件添加到上傳隊(duì)列后觸發(fā)
BeforeUpload // 當(dāng)隊(duì)列中的某一個(gè)文件正要開始上傳前觸發(fā)
UploadProgress // 顯示上傳進(jìn)度
FileUploaded // 當(dāng)隊(duì)列中的某一個(gè)文件上傳完成后觸發(fā)
Error // 錯(cuò)誤
以上是我用到的凤藏，大家可以根據(jù)自己的需求去添加。具體可參考博客：https://www.cnblogs.com/2050/p/3913184.html堕伪。
寫的很詳細(xì)了揖庄，我也是參考這個(gè)博客的，對(duì)plupload有了進(jìn)一步認(rèn)識(shí)刃跛。
3.使用
html：
<img class="photo" src="{{photourl}}" alt="">
<div id="ossfile" class="ossfile"></div>
<div id="container" class="upload_btn">
<button ion-button icon-only id="selectfiles">選擇文件</button>
<button ion-button icon-only id="postfiles">開始上傳</button>
</div>
ts:
set_upload_param(up, filename) {
let token = ********;
***********.subscribe((body: any) => {
// 這里是我向后臺(tái)發(fā)送的請(qǐng)求 獲取到需要上傳給 阿里云的數(shù)據(jù)
let new_multipart_params = {
'key': dir + '${filename}',
'policy':policy,
'OSSAccessKeyId':accessid,
'success_action_status': '200', //讓服務(wù)端返回200,不然抠艾，默認(rèn)會(huì)返回204
'signature': signature,
'x-oss-object-acl': 'public-read'
};
up.setOption({
'url': host,
'multipart_params': new_multipart_params
});
up.start();
}
})
}
uploadImg() {
// 這里需要注意 this 的指向問題
let that = this;
this.uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
browse_button: 'selectfiles',
multi_selection: false,
container: document.getElementById('container'),
url: '*******',
filters: {
mime_types: [
{ title: "Image files", extensions: "jpg,jpeg,gif,png,bmp" },
],
max_file_size: '10mb',
prevent_duplicates: true,
},
resize: {
crop: false,
quality: 90,
preserve_headers: false
},
init: {
PostInit: function () {
document.getElementById('postfiles').onclick = function () {
that.set_upload_param(that.uploader, '');
return false;
};
},
FilesAdded: function (up, files) {
document.getElementById('ossfile').innerHTML = '';
plupload.each(files, function (file) {
document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + '(' + file.name + ')<b></b>'
+ '<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
+ '</div>';
});
// 這里【重點(diǎn)】：獲取圖片的原始尺寸來進(jìn)行計(jì)算 壓縮的尺寸
// 我這里設(shè)置的寬1000苛萎，高800
let image = new Image();
let reader = new FileReader();
reader.onload = (readerEvent: any) => {
image.onload = () => {
let originalWidth = image.width; // 原始圖片的寬
let originalHeight = image.height; // 原始圖片的高
if (originalWidth >= 1000) {
that.uploader.settings.resize.width = 1000;
that.uploader.settings.resize.height = Math.floor(originalHeight * (that.uploader.settings.resize.width / originalWidth));
if (that.uploader.settings.resize.height > 800) {
that.uploader.settings.resize.width = Math.floor(that.uploader.settings.resize.width * (800 / that.uploader.settings.resize.height));
that.uploader.settings.resize.height = 800;
}
}
else if (originalHeight > 800) {
that.uploader.settings.resize.height = 800;
that.uploader.settings.resize.width = Math.floor(originalWidth * (that.uploader.settings.resize.height / originalHeight));
}
else {
that.uploader.settings.resize.width = originalWidth;
that.uploader.settings.resize.height = originalHeight;
}
};
image.src = readerEvent.target.result;
};
reader.readAsDataURL(files[0].getNative());
},
BeforeUpload: function (up, file) {
that.set_upload_param(up, file.name);
},
UploadProgress: function (up, file) {
var d = document.getElementById(file.id);
d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
var prog = d.getElementsByTagName('div')[0];
var progBar = prog.getElementsByTagName('div')[0]
progBar.style.width = 2 * file.percent + 'px';
progBar.setAttribute('aria-valuenow', file.percent);
},
FileUploaded: function (up, file, info) {
if (info.status == 200) {
that.appStatus.infoMsg('上傳成功');
// 這一步是 上傳成功后桨昙，清除進(jìn)度條
document.getElementById('ossfile').innerHTML = '';
}
else if (info.status == 203) {
console.log('上傳到OSS成功，但是oss訪問用戶設(shè)置的上傳回調(diào)服務(wù)器失敗');
console.log('失敗原因是:' + info.response);
}
else {
console.log('失敗原因是:' + info.response);
}
},
Error: function (up, err) {
if (err.code == -600) {
that.appStatus.infoMsg("選擇的文件太大了腌歉！")
}
else if (err.code == -601) {
that.appStatus.infoMsg("選擇的上傳文件類型不對(duì)蛙酪！")
}
else if (err.code == -602) {
that.appStatus.infoMsg("這個(gè)文件已經(jīng)選擇過一遍了！")
}
else {
console.log(err.response)
}
}
}
});
this.uploader.init();
}
【重點(diǎn)】：
- this的指向問題
- resize的寬高動(dòng)態(tài)賦值需要是：uploader.settings.resize.width 翘盖、uploader.settings.resize.height
- resize只給寬桂塞，比如
resize: {
width：800，
crop: false,
quality: 90,
preserve_headers: false
},
這個(gè)能實(shí)現(xiàn)壓縮馍驯，圖片體積可以壓縮阁危，寬高可以不進(jìn)行剪裁 同比例縮小玛痊。圖片大于800進(jìn)行壓縮，小于不壓縮狂打。我的需求是限定了高擂煞，所以要進(jìn)行計(jì)算。 - 案例上的進(jìn)度條是 同時(shí)存在多個(gè)趴乡。我的需求是 只顯示一個(gè)对省，成功后消失。具體代碼是：
FilesAdded: function (up, files) {
document.getElementById('ossfile').innerHTML = '';
plupload.each(files, function (file) {
document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + '(' + file.name + ')<b></b>'
+ '<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
+ '</div>';
});
}
FileUploaded: function (up, file, info) {
if (info.status == 200) {
that.appStatus.infoMsg('上傳成功');
// 這一步是 上傳成功后晾捏，清除進(jìn)度條
document.getElementById('ossfile').innerHTML = '';
}
}
這個(gè)實(shí)現(xiàn)了我的需求蒿涎，還有許多不足之處，大家可以做個(gè)參考惦辛！
最后給大家看下我的頁面效果：
image.png
