三、在Vue中实现图片上传

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

一、开发图片上传组件

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

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

二、页面运用

三、页面效果

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

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

```

/**

* 获得base64

* @param {Object} obj

* @param {Number} [obj.width] 图片需要压缩的宽度，高度会跟随调整

* @param {Number} [obj.quality=0.8] 压缩质量，不压缩为1

* @param {Function} [obj.before(this, blob, file)] 处理前函数,this指向的是input:file

* @param {Function} obj.success(obj) 处理后函数

* @example

*

*/

$.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='';// 清空临时数据

});

/**

* 生成base64

* @param blob 通过file获得的二进制

*/

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);

/**

* 生成base64

* 兼容修复移动设备需要引入mobileBUGFix.js

*/

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);

};

}

};

/* 使用方法

$('input:file').localResizeIMG({

width: 100,

quality: 0.1,

//before: function (_this, blob) {},

success: function (result) {

var img = new Image();

img.src = result.base64;

$('body').append(img);

console.log(result);

}

});

*/

```

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