功能描述:点击“上传”按钮,调起本地文件夹,上传图片到页面中进行展示。由于图片过大,需要进行压缩才能入库中保存。
1.首先进行布局
HTML中
<div class="licenceBox">
<input
class="licenceBtn"
accept="image/jpeg,image/jpg,image/png"
type="file"
@change="upload($event)"
/>
<!-- 这里的方法要用change,刚开始我用的click,读取不到照片的所需数据 -->
</div>
2.对样式进行修改。
当input的type属性为file时,默认样式为下图:
实际上需要的样式为下图:
那就可以进行如下修改啦
<style>
.licenceBox{
display: inline-block;
position: relative;
padding: 1px 24px;
overflow: hidden;
color:#fff;
background: #3B85F0;
border-radius:15px;
}
.licenceBtn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
background: transparent;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
</style>
3.重要的一环来啦,本地选取图片并在页面成功预览,传base64给后端进行入库操作。
upload(e){
// 选择的文件对象
let file = e.target.files[0];
let that = this;
if (file) {
let reader = new FileReader();
reader.onload = (e)=>{
if (e.target.result.length / 1024 > 1024) { // 大于1M进行图片压缩
//压缩方法进行了封装,请看4
imageCompression(e,function(data){
//that.passImg 为项目中img标签的src动态绑定值
that.passImg = data;
})
} else {
that.passImg = e.target.result;
}
}
reader.readAsDataURL(file);
}
} ,
4.图片压缩
export function imageCompression(e,next){
//创建一个img对象
var img = new Image();
img.src = e.target.result;
// base64地址图片加载完毕后执行
img.onload = function () {
// 缩放图片需要的canvas(也可以在DOM中直接定义canvas标签,这样就能把压缩完的图片不转base64也能直接显示出来)
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// 图片原始尺寸
var originWidth = this.width,
originHeight = this.height,
// 最大尺寸限制,可通过设置宽高来实现图片压缩程度
maxWidth = 800,
maxHeight = 800,
// 目标尺寸
targetWidth = originWidth,
targetHeight = originHeight,
// 图片尺寸超过最大尺寸的限制
if(originWidth > maxWidth || originHeight > maxHeight) {
if(originWidth / originHeight > maxWidth / maxHeight) {
// 更改宽度,按照宽度限定尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
//对图片进行缩放
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect(0, 0, targetWidth, targetHeight);
//画布背景色改为白色,默认是黑色,如果上传的是圆形图片会背景有黑色块
context.fillStyle = '#fff';
// 图片压缩
context.drawImage(img, 0, 0, targetWidth, targetHeight);
/*第一个参数是创建的img对象;第二三个参数是左上角坐标,后面两个是画布区域宽高*/
//压缩后的base64文件
next(canvas.toDataURL('image/jpeg', 0.92))
//0.92和最大尺寸800可以自行修改。当0.92设置为0.5时,大概压缩8倍左右。
}
}
5.将转成base64的图片传给后端,然后取值展示时,遇到了一个问题:返回的图片白板了,即返回的一张空白图。
解决办法:传给后端前进行加密处理,接收时进行解密处理。
//加密字符串,可以先将中文加密,然后再用btoa加密
function encryption(str){
var encStr = encodeURIComponent(str);
encStr = btoa(encStr);
return encStr;
}
//解密,可以先将ascii解密,然后再将非ascii解密
function decrypt(str){
var decStr = atob(str);
decStr = decodeURIComponent(decStr);
return decStr;