layui实现文件压缩上传_Layui上传图片并进行压缩.md

在工作中使用到layui，发现其上传功能并不是很适用于自己的项目。故此，借用其上传功能，自己将图片压缩并上传.

Layui 上传图片官方文档：https://www.layui.com/doc/modules/upload.html

HTML：

```html

上传图片

```

tips:不一定非要是input标签，无论是什么标签，layui upload是根据其 id 值进行操作的

JS：

```js

//使用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

}));

}

```

一键复制

编辑

Web IDE

原始数据

按行查看

历史