是因为手机拍的原图太大 这里做一下压缩即可
原文摘自:https://blog.csdn.net/Jasons_xie/article/details/89204379
html:
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传图片
</button>
js:
//使用layui上传图片
layui.use('upload', function () {
var upload = layui.upload;
var layer = layui.layer;
//执行实例
var uploadInst = upload.render({
elem: '#test1', //绑定元素
url: 'pic.php', //上传接口
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 > 5) {//这里可以设置图片的上传最大限制
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.5 ;// 图像质量 越大越清晰
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
}));
}
我的后台是php
print_r($_FILES["file"]);即可打印文件