1、项目中我们会遇到图片上传的案例，图片上传分单张和多张图片上传，往往我们会发现图片上传时候遇到上传速度问题，有时候可能用户上传的图片比较大，导致等待时间较长，影响用户体验，那我们就先看下图片base64上传问题
先说一下当前环境：
1、接口支持图片base64上传模式，上传成功接口返回图片名字
2、提交图片接口以","分割开来的字符串来提交
3、删除功能原理就是声明一个空的数组，图片上传完成后返回的图片名字push到这个数组里，
删除的话只删除数组对应项，最终提交时候是修改编辑后的数组
html 代码：
<div class="uploader-file">
<div class="uploadImgCon" id="uploadImgCon1">
//这里用来存放生成的图片预览缩略图
</div>
<div class="add-icon">
<img src="images/upload-pic2.png" />
<input type="file" class="file-btn" id="photo" accept="image/*" name="file" capture="camera" multiple="multiple" value="" />
<input type="hidden" name="img_upload_base" id="img_upload_base" />
</div>
</div>
css代码：
.uploadImgCon{position:relative;z-index:100;overflow: hidden;}
.imagebox{width:25%;position:relative;float:left;box-sizing:border-box;padding:0.1rem;}
.imagebox img{vertical-align:middle;}
.imagebox span{position:absolute;top:0.1rem;right:0.1rem;font-size:0.24rem;color:#fff;z-index:100;background:#CC3333;padding:0.05rem 0.1rem;}
.uploader-file .add-icon{width:1.26rem;height:1.2rem;position:relative;}
.uploader-file .add-icon img{width:1.26rem;height:1.2rem;float:left;}
.uploader-file input{width:1.26rem;height:1.2rem;float:left;position:absolute;left:0;top:0;opacity:0;}
选择图片并上传至服务器端js代码：
//照片异步上传
var picresult=[];
$('#photo').change(function(e){
var file = e.target.files;
var imghtm=''
if(file.length>0){//判断是否是多张照片上传
for (var i = 0; i < file.length; i++) {
var reader = new FileReader();
reader.readAsDataURL(file[i]);//调用自带方法进行转换
reader.onload = function(e) {
imghtm='<div class="imagebox"><img src='+this.result+'><span>删除</span></div>';
$("#uploadImgCon1").append(imghtm);
$("#uploadImgCon1 .imagebox span").click(function(){
var index=$(this).parent().index();
$(this).parent().remove();
if(index>=0){
picresult.splice(index,1);//删除数组中的第几张图片
console.log(picresult);
}
})
$("#img_upload_base").val(this.result);//将转换后的编码保存到input供后台使用
var img=$("#img_upload_base").val();
var imgNum = img.split(";base64,");
var imgBase=imgNum[1];
var imgurl=$("#img_upload_base").val();
$.ajax({
headers:{'Authorization':'Bearer'+access_token},
url:host+'/api/base64Upload',
dataType:'json',
data:{'imgurl':imgurl},
type:'post',
success:function(data){
if(data.code==1){ //图片上传成功返回图片名称或者路径
picresult.push(data.data);
}else{ //图片上传失败
return false;
}
}
});
};
}
}
});
图片确认保存提交操作：
$("#enterbtn").click(function(){
var picarry = picresult.join(','); //arr是以&分割的字符串
console.log(picarry);
var desc=$("#desc").val();
$.ajax({
headers:{'Authorization':'Bearer'+access_token},
url:host+'/api/custom/edit',
dataType:'json',
data:{'id':id,'images':picarry,'desc':desc},
type:'post',
success:function(data){
if(data.code==1)
{
//alert("信息提交成功");
}else{
alert(data.data);
}
},
error: function (picdata)
{
alert(data.data);
return false;
}
});
});
上面就完成了图片base64的上传问题，后来发现图片base64上传没问题，但是在回显图片的时候图片太多或者单张上传图片很大超过10M了，这时候后端压缩图片发现效率很慢，那就继续优化，找到了前端压缩图片的方法
1、首先我们要找到图片压缩的js方法这里是函数
//获取图片地址
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // web_kit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
//图片转成base64后压缩
function convertImgToBase64(url, callback, outputFormat){
//创建canvas画布
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
//创建img对象
var img = new Image;
img.crossOrigin = 'Anonymous';
//图片加载
img.onload = function(){
var width = img.width;
var height = img.height;
// 按比例压缩4倍
var rate = (width<height ? width/height :height/width)/8;
//设置画布的width和height
canvas.width = width*rate;
canvas.height = height*rate;
//绘制图片
ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate);
//压缩
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
//转指向，返回值
callback.call(this, dataURL);
//清除画布
canvas = null;
};
img.src = url;
}
选择图片并上传至服务器后台方法优化后如下（变动地方做了加粗，发现再上传10M图片速度就相当快了）：
//照片异步上传
$('#photo').change(function(e){ //此处用了change事件，当选择好图片打开，关闭窗口时触发此事件
var file = e.target.files;
var imghtm=''
if(file.length>0)
{
for (var i = 0; i < file.length; i++) {
var imageUrl = getObjectURL(file[i])
convertImgToBase64(imageUrl, function(base64Img){
//var reader = new FileReader();
//reader.readAsDataURL(imageUrl);//调用自带方法进行转换
// reader.onload = function(e) {
imghtm='<div class="imagebox"><img src='+base64Img+'><span>删除</span></div>';
//$("#img_upload_show").attr("src", );//将转换后的编码存入src完成预览
$("#uploadImgCon1").append(imghtm);
$("#uploadImgCon1 .imagebox span").click(function(){
var index=$(this).parent().index();
console.log(index);
$(this).parent().remove();
if(index>=0){
picresult.splice(index,1);
console.log(picresult);
}
})
$("#img_upload_base").val(base64Img);//将转换后的编码保存到input供后台使用
// alert(this.result);
var img=$("#img_upload_base").val();
// var imgType=img.Substring(0,i)
var imgNum = img.split(";base64,");
var imgBase=imgNum[1];
var imgurl=$("#img_upload_base").val();
$("#enterbtn").html("图片上传中...");
$("#enterbtn").attr("disabled",true)
$.ajax({
headers:{'Authorization':'Bearer'+access_token},
url:host+'/api/base64Upload',
dataType:'json',
//data:{'imgurl':imgurl},
data:{'imgurl':imgurl},
type:'post',
success:function(data){
if(data.code==1)
{
$("#enterbtn").attr("disabled",false)
$("#enterbtn").html("确认提交");
picresult.push(data.data);
}else{
alert(data.data);
return false;
}
}
});
//};
});
}
}
});
