三年。net开发转前端已经四个月了,前端主要用webpack + vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习。
图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖金桥并且会使系统比较臃肿,还有传统的网络开发模式前后端偶尔在一起及对用户体验要求低,现在公司采用webpack + vue + restfullApi开发模式前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期对于很多开发人员需要有个适应的过程,特别是初中级的前端处理业务逻辑方面的能力比较欠缺),二则提升用户体验。今天分享下在项目开发中写的的图片上传vue组件。
这里用代替做图片上传考虑到浏览器支持的问题,这里考虑的场景是在做应用的时候
1。移动网络图片上传还包括拍摄上传,但是在移动端会出现拍摄的照片会旋转,处理这个问题需要得到图片旋转的情况,可以用exif.js来获取,具体可以参看文档
2。图片压缩
3。旋转
<强> 1组件代码
& lt; template>
& lt; div>
& lt;输入类型="文件" id=癷mg-upload”多个接受=巴枷?*”@change=皍ploadImg(事件)美元/比;
& lt;/div>
& lt;/template>
& lt; script>
从“进口EXIF . ./. ./. ./资源/全球/Js/EXIF”
出口默认{
名称:“image-html5-upload”,
道具:{
imgArr: {
类型:数组,
twoWay:没错,
默认值:数组
}，
imgNumLimit:{//一次最多可以上传多少张照片
类型:数字,
默认值:4
}
}，
方法:{
“uploadImg”:函数(e) {
让标签=e。target;
让文件列表=tag.files;
让imgNum=fileList.length;
让_this=;
_this。imgArr=[];//图片数据清零
如果(this.imgArr。长度+ imgNum比;this.imgNumLimit) {
alert('一次最多上传的+ this.imgNumLimit +“张图片!”);
返回;
}
var取向;
(让我=0;i。naturalHeight & &。naturalWidth> 800) {
expectWidth=800;
expectHeight=expectWidth *。naturalHeight/this.naturalWidth;
如果(这其他}。naturalHeight>。naturalWidth & &。naturalHeight> 1200) {
expectHeight=1200;
expectWidth=expectHeight *。naturalWidth/this.naturalHeight;
}
画布var=document.createElement(“画布”);
var ctx=canvas.getContext (2 d);
画布。宽度=expectWidth;
画布。身高=expectHeight;
ctx。drawImage (0, 0, expectWidth expectHeight);
var base64=零;//修复ios上传图片的时候被旋转的问题
如果(取向!=" ",,取向!=1){
开关(方向){
案例6://需要顺时针(向左)90度旋转
_this.rotateImg(‘左’,这帆布);
打破;
例8://需要逆时针(向右)90度旋转
_this.rotateImg(“正确”的,这帆布);
打破;
案例3://需要180度旋转
_this.rotateImg(“正确”的,这帆布);//转两次
_this.rotateImg(“正确”的,这帆布);
打破;
}
}
base64=画布。toDataURL(“图像/jpeg”, 0.8);
如果文件列表[我]。尺寸/1024000比;1){
_this。imgScale (base64, 4)
其他}{
_this.imgArr。推动({“src”: base64});
}
console.log (JSON.stringify (_this.imgArr));
};
};
[我]oReader.readAsDataURL(文件列表);
}
}
}，
“imgScale”:函数(imgUrl、质量){
让img=新形象();
让_this=;
让帆布=document.createElement(“画布”);
让cxt=canvas.getContext (2 d);
img。src=https://www.yisu.com/zixun/imgUrl;
img。onload=function () {//缩放后图片的宽高
让宽度=img.naturalWidth/质量;
让身高=img.naturalHeight/质量;
画布。宽度=宽度;
画布。身高=身高;
cxt。drawImage(0, 0,宽度、高度);
_this.imgArr。推动({“src”: canvas.toDataURL(图像/jpeg)});
}
}，
“rotateImg”:函数(img、方向、帆布){//图片旋转
var min_step=0;
var max_step=3;
如果(img==null)返回;
var高度=img.height;
var宽度=img.width;
var一步=2;
如果(步骤==null) {
一步=min_step;
}
如果(==罢贰钡姆较?{
步+ +;
一步比;max_step,,(步骤=min_step);
其他}{
一步,;
一步& lt;min_step,,(步骤=max_step);
}
var=一步* 90 *数学学位。π/180;
var ctx=canvas.getContext (2 d);
开关(步骤){
例0:
画布。宽度=宽度;
画布。身高=身高;
ctx。drawImage (img, 0, 0);
打破;
案例1:
画布。宽度=高度;
画布。身高=宽度;
ctx.rotate(度);
ctx。drawImage (img 0高度);
打破;
案例2:
画布。宽度=宽度;
画布。身高=身高;
ctx.rotate(度);
ctx。drawImage (img - width、高度);
打破;
案例3:
画布。宽度=高度;
画布。身高=宽度;
ctx.rotate(度);
ctx。drawImage (img - width 0);
打破;
}
}
}
}
& lt;/script>
