vue 实现压缩图片上传到oss

我们偶尔会在项目中碰到上传的需求，对于部分前端开发人员来说，上传资源是一个比较头疼的事情，你要根据各种不同的UI设计，设计出相应的上传页面样式，上传的地址不一样，可能你的处理就会不一样。你可能选择使用插件，或者自己动手写一个。这里笔记简单介绍一个vue项目的中上传示例，不适用插件，自定义样式和上传，最终上传到阿里云中。
先看一下样式吧：

这种样式设计效果应该是大多数前端上传的设计样式，针对样式的表现，笔者在这里不做讲解，只要你想设计，什么样的样式随你自己设计。
笔者的上传主要通过input来实现：

<input capture="video" @change="handleImgUpload" :id="id" type="file" />

上传的图片的压缩处理，和上传处理都在上述代码的change事件中处理。
因为上传的图片可能会是3、4M大，如果原图上传的话是很占用带宽和资源的，所以我们考虑上传前对图片进行一下压缩，那么如何压缩？
1，使用插件，网上有不少相关的图片上传压缩控件，读者可以选择使用控件。
2，通过canvas进行压缩。
笔者看过部分压缩空间，大部分最终也是通过canvas来实现图片的压缩的，这里笔者采用第二种方法，直接使用canvas进行压缩，一个简单的方法就可以满足大部分压缩需求。
下面是图片压缩代码。

var eleFile = document.getElementById(this.id);

// 压缩图片需要的一些元素和对象
var reader = new FileReader(),
    img = new Image();

// 选择的文件对象
var file = null;
file = event.target.files[0];
// 选择的文件是图片
if(file.type.indexOf(