Layui前端上传模块

概述在工作中使用到layui，发现其上传功能并不是很适用于自己的项目。故此，借用其上传功能，自己将图片压缩并上传. Layui 上传图片官方文档：https://www.layui.com/doc/modules/upload.html HTML：  <button type="button" class="layui-btn" id="test1"> <i class="layui-icon">&#

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

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

HTML： 

<button type="button" ID="test1">
<i >&#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,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> 

总结

以上是内存溢出为你收集整理的Layui前端上传模块全部内容，希望文章能够帮你解决Layui前端上传模块所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。