因为项目的需要,使用了layui,但是在调用图片上传的时候,手机端出现调用手机拍照,但是提示图片上传接口异常,度娘了一下,发现将图片压缩上传就可以了,图片上传的大小不超过2M.
function canvasDataURL(file, callback) { //压缩转化为base64
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function (e) {
const img = new Image()
const quality = 0.1 // 图像质量
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
}));
}
var uploadListIns3 = upload.render({
elem: '#uploadBtn3'
, url: url
,data: ''
,accept: 'file' //普通文件
,acceptMime: 'image/*' //只显示图片 (exts 属性不要设置)
, multiple: true
,size: 1024*8
,accept: 'file' //普通文件
,acceptMime: 'image/*' //只显示图片 (exts 属性不要设置)
, 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('上传图片超过2M！')
} else {
if (file.size < aafile.size) {
return obj.upload(index, file)
}
obj.upload(index, aafile)
}
})
}
, before: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#prev04').append('<img class="upload-img" src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
});
layer.load(2, {shade: 0.5,time: 30*1000});
}
, done: function (res, imgIndex, upload) {
}
});
