三、在Vue中实现图片上传

大家好，今天我要给大家说说图片上传的功能。这个功能在项目中经常用到，为此，我将写个公共组件，方便大家直接调用。废话少说，进入主题。

组件具体内容，如图所示，顺便问一下，我如何在简书里面粘贴代码，按照网上说的方法更改富文本编辑，没有成功，估计编辑器发生变化了。

注意：imgUrl就是我们获取的图片地址

由于后台接口我们用的是阿里云的OSS服务，所以，代码就不贴了。感谢大家的收看。

忘了一个更重要的事情，那就是图片压缩的代码，把以下代码单独写在一个文件里，然后运用的时候调用即可。

```

$.fn.localResizeIMG= function(obj) {

this.on('change',function() {

varfile= this.files[0];

varURL=URL||webkitURL;

varblob=URL.createObjectURL(file);

// 执行前函数

if($.isFunction(obj.before)) {obj.before(this, blob, file) };

_create(blob, file);

this.value='';// 清空临时数据

});

function_create(blob) {

varimg= newImage();

img.src=blob;

img.onload= function() {

var_this= this;

//生成比例

varw=_this.width,

h=_this.width,

scale=w/h;

w=obj.width||w;

h=w/scale;

//生成canvas

varcanvas=document.createElement('canvas');

varctx=canvas.getContext('2d');

$(canvas).attr({width:w, height:h});

ctx.drawImage(_this,0,0, w, h);

varbase64=canvas.toDataURL('image/jpeg',obj.quality||0.8);

// 修复IOS

if( navigator.userAgent.match(/iphone/i) ) {

varmpImg= newMegaPixImage(img);

mpImg.render(canvas, { maxWidth:w, maxHeight:h, quality:obj.quality||0.8, orientation:6});

base64=canvas.toDataURL('image/jpeg',obj.quality||0.8);

}

// 修复android

if( navigator.userAgent.match(/Android/i) ) {

varencoder= newJPEGEncoder();

base64=encoder.encode(ctx.getImageData(0,0,w,h),obj.quality*100||80);

}

// 生成结果

varresult={

blob:blob,

base64:base64,

clearbase64:base64.substr( base64.indexOf(',')+1)

};

// 执行后函数

obj.success(result);

};

}

};

```

作者：陈楠酒肆
链接：https://www.jianshu.com/p/1f87b350e3a2