vue-core-image-upload 是一款方便的 vue.js 图片上传裁剪插件，你可以用它进行图片的上传，裁剪和压缩。
vue-core-image-upload 提供 is-xhr 这个属性来 取消默认的上传方式。然后通过 imagechanged 来获取文件内容。
参考示例
下面我们简单实现一套代码，实现自定义图片处理，我们不用自动上传，我们上传一张 png 然后将图片进行压缩和重命名上传到我们的服务器。
安装依赖
默认的一些 vue ，webpack 这些安装就省略了，我们直接开始先安装插件 :
npm i vue-core-image-upload --save
然后安装 j-i-c 用于图片的压缩。
npm install j-i-c --save
安装完成后，我们还需要做点小事情，我们需要将 jic 改成 common.js 的模式。这个时候我们更改下 src/JIC.js 。我们需要在文件末尾将模块导出；
// ... above contens
module.exports = jic;
编辑基本的 vue 文件
<template>
<div class="components">
<h3>取消默认的上传</h3>
<p>你可以设置<code>isXhr</code> 设置为 false 。然后通过 `imagechanged` 来取得上传文件的信息。如果是单文件，则范围该文件的信息，
如果上传的
<div class="m-form">
<vue-core-image-upload
:class="['btn', 'btn-primary']"
:crop="false"
@imagechanged="imagechanged"
:isXhr="false"
text="点击上传"
url="http://101.198.151.190/api/upload.php" >
</vue-core-image-upload>
</div>
<p v-if="!image">
There is no image!
</p>
<p>上传图片</p>
<table class="m-table bordered" v-if="image" width="620">
<tr>
<th width="50%">原始图片</th>
<th>压缩图片</th>
</tr>
<tr>
<td><img id="source" width="100%" :src="image" /></td>
<td><img width="100%" :src="compressSrc" /></td>
</tr>
</table>
<button type="button" @click="upload"> 上传图片 </button>
</div>
</template>
其中主要是一个插件按钮和一个表格用于图片对比，以及上传按钮！
读取上传的文件
我们实际上在实现的时候，是通过监听 input[type="file"] 的 change 事件来实现上传文件内容的读取，其获取的值实际上是一个 File 对象。
你可以读取到它的类型，文件大小，以及名称。但是如果你需要进行图片的预览的话，你需要使用 FileReader 对象来读取 file 对象，然后将获取的 对象 result 会是一个 base64 编码，用于图片预览。
import VueCoreImageUpload from 'vue-core-image-upload';
import jic from 'j-i-c';
export default {
components: {
VueCoreImageUpload,
},
data() {
return {
image: false,
title: '',
};
},
methods: {
imagechanged(res) {
this.title = res.name;
const reader = new FileReader();
let self = this;
reader.onload = function(e) {
const src = e.target.result;
this.image = src;
}
reader.readAsDataURL(res);
}
}
};
压缩图片
这个时候我们使用 j-i-c 来把上传的图片压缩。
compressImage() {
const quality = 50;
// output file format (jpg || png)
const outputFormat = 'jpg';
//This function returns an Image Object
const sourceImg = document.querySelector('#source');
this.compressSrc = jic.compress(sourceImg, quality, outputFormat).src;
}
上传图片
拿到压缩图片的的 base64 代码后，你可以把它当做一个字符串或者走 binary 进行上传。代码详情参考: https://github.com/Vanthink-UED/core-image-xhr/blob/master/index.js
这里你们可以自己构造 ifrmae 或者 xhr 的上传。