https://github.com/Vanthink-UED/vue-core-image-upload
安装npm install vue-core-image-upload --save
安装完成后，编辑源码
<template><div class="center"> <vue-core-image-upload class="btn btn-primary" :crop="false" @imageuploaded="imageuploaded" :data="data" :max-file-size="5242880" url="" > </vue-core-image-upload></div></template><script>import VueCoreImageUpload from 'core/vue-core-image-upload.vue'export default { components: { 'vue-core-image-upload': VueCoreImageUpload, }, data() { return { src: '.png', } }, methods: { imageuploaded(res) { if (res.errcode == 0) { this.src = res.data.src; } } }};</script>基本属性Vue-core-image-upload 供应了很多可配置的选项，从而希望尽可能的知足开拓者的需求。
<vue-core-image-upload :class="['btn', 'btn-primary']" :crop="false" @imageuploaded="imageuploaded" :data="data" :max-file-size="5242880" url="" ></vue-core-image-upload>相应事宜
我们在上传的不同阶段指定了不同的派发事宜，你可以绑定每个事宜的相应方法，实现对付流程的掌握。
imageuploaded当图片上传完，会调用该事宜绑定的函数，并且用户可以获取到做事端返回的数据。
imagechanged当input框改变选择图片时候触发，会返回input的获取的图片数据
imageuploading当图片上传过程中触发，你可以自定义你须要处理的内容比如显示加载动画等。
errorhandle当图片上传发生缺点的时候触发，会返回缺点状态信息
<vue-core-image-upload :class="['btn', 'btn-primary']" :crop="false" @imagechanged="imagechanged" @imageuploading="imageuploading" @imageuploaded="imageuploaded" :max-file-size="5242880" url=".php" ></vue-core-image-upload>
methods: { imagechanged() { this.step += 1; }, imageuploading() { this.step += 1; }, imageuploaded(res) { this.step += 1; this.src = res.data.src; } }自定义组件样式你可以设置组件的class 以及自己编写子组件的形式来掌握组件的显示的样子。
<vue-core-image-upload :crop="false" @imageuploaded="imageuploaded" :data="data" :max-file-size="5242880" url=".php" > <img width="150" src=".png" /> </vue-core-image-upload>裁剪图片你可以通过设置 crop，来实现图片的裁剪。你可以指定图片裁剪的宽高，以及它的最大宽度和高度这些参数。
设置 cropRatio来限定裁剪图片的形状，须要字符串的格式(1:1 或者2:3这种比例形式)，当然你可以设置为 auto 则不限定裁剪框的形状。
设置图片裁剪后，批量上传将不再生效。
图片裁剪完有两种选择，选择本地裁剪local或者做事端裁剪 server。
本地裁剪你可以将 crop 设置为 local 来实现本地裁剪。本地裁剪完成后发送给做事端接口的图片便是已经裁剪好的图片。
做事端裁剪做事端裁剪是指将原图片和裁剪的参数一起发给后端，方便做事端保存原图，以及对原图的其他操作，而做事端能够吸收到post的参数如下:
<vue-core-image-upload crop-ratio="1:1" :class="['btn', 'btn-primary']" crop="server" url="....php" extensions="png,gif,jpeg,jpg" text="Crop Image" @imageuploaded="crpoServerImageUploaded"></vue-core-image-upload>调度图片你可以设置 resize 来进行图片的缩放。
设置resize="local" 意味着图片的缩放将在本地进行。发给做事真个将会是大小调度完毕的后的图片。
<vue-core-image-upload crop-ratio="1:1" class="btn btn-primary" resize="local" url=".php" extensions="png,gif,jpeg,jpg" text="Resize Image" @imageuploaded="resizeLocalImageUploaded"></vue-core-image-upload>上传多个文件multiple
你可以利用 multiple 属性设置为true来实现多文件的上传。须要把稳的是，你设置了该属性后,做事端收到文件上传的字段数据会是一个数组。
multiple-size你可以利用multiple-size来限定图片的数量，你可以限定上传文件的数量。
<vue-core-image-uploadclass="btn btn-primary":crop="false"@imageuploaded="imageUploded":max-file-size="5242880":multiple="true":multiple-size="4"url=".php" ></vue-core-image-upload>压缩图片设置compress的数值，你可以在上传之提高行图片确当地压缩。个中 compress 为 0 表示不压缩，数据越大，图片的质量越差，且最大值不能大于100。
<vue-core-image-upload :class="['btn', 'btn-primary']" @imageuploaded="imageUploded" :max-file-size="5242880" compress="50" // 设置压缩比例 url="/upload" ></vue-core-image-upload>向做事端发送数据你可以设置data 来将一些附带的数据发送给做事端。 当然你也可以将一些数据包含在 header 中通报过去，你只须要绑定到 header即可。
上一篇
