Layui前端上傳模塊

在工做中使用到layui，發現其上傳功能並非很適用於本身的項目。故此，借用其上傳功能，本身將圖片壓縮並上傳.

Layui 上傳圖片官方文檔：https://www.layui.com/doc/modules/upload.html

HTML： 

<button type="button" class="layui-btn" id="test1">
<i class="layui-icon">&#xe67c;</i>上傳圖片
</button>
tips:不必定非要是input標籤，不管是什麼標籤，layui upload是根據其 id 值進行操做的

JS：  

<script>
//使用layui上傳圖片
layui.use('upload', function () {
var upload = layui.upload;
var layer = layui.layer;

//執行實例
var uploadInst = upload.render({
elem: '#isTest', //綁定元素
url: '/upload/', //上傳接口
accept: 'images',
auto: false,

choose: function (obj) { //選擇文件後的回調
var files = obj.pushFile();
var filesArry = [];
for (var key in files) { //將上傳的文件轉爲數組形式
filesArry.push(files[key])
}
var index = filesArry.length - 1;
var file = filesArry[index]; //獲取最後選擇的圖片,即處理多選狀況

if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1]
.replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
return obj.upload(index, file)
}
canvasDataURL(file, function (blob) {
var aafile = new File([blob], file.name, {
type: file.type
})
var isLt1M;
if (file.size < aafile.size) {
isLt1M = file.size
} else {
isLt1M = aafile.size
}

if (isLt1M / 1024 / 1024 > 2) {
return layer.alert('上傳圖片過大！')
} else {
if (file.size < aafile.size) {
return obj.upload(index, file)
}
obj.upload(index, aafile)
}
})
},
done: function (res) {
//上傳完畢回調
},
error: function () {
//請求異常回調
}
});
});

function canvasDataURL(file, callback) { //壓縮轉化爲base64
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function (e) {
const img = new Image()
const quality = 0.8 // 圖像質量
const canvas = document.createElement('canvas')
const drawer = canvas.getContext('2d')
img.src = this.result
img.onload = function () {
canvas.width = img.width
canvas.height = img.height
drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);
}
}
}

function convertBase64UrlToBlob(urlData, callback) { //將base64轉化爲文件格式
const arr = urlData.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
callback(new Blob([u8arr], {
type: mime
}));
}

</script>