Vue-core-image-upload-mgr NPM

Vue-Core-Image-Upload-Mgr

本项目从vue-core-image-upload fork而来，在项目原来的基础之上做了一些优化增加了一些功能：

添加了预览功能，和预览样式
优化了裁剪背景更容易识别
增加了裁剪框可移动的功能
优化了裁剪框的样式
将resize组件迁移至btn头部
增加了裁剪框大小样式显示效果预览：

npm包测试：

npm install vue-core-image-mgr

Vue-Core-Image-Upload

a vue plugin for image upload and crop ( Support 📱 IE10+)

查看文档

English Document

if you use vue.js(<=2.0), you should go here.Or select 1.x.x version.

Install

npm i vue-core-image-upload --save

Code Example (ES6)

<vue-core-image-upload
  :class="['btn', 'btn-primary']"
  :crop="false"
  @imageuploaded="imageuploaded"
  :data="data"
  :max-file-size="5242880"
  url="your server url" >
</vue-core-image-upload>

import VueCoreImageUpload  from 'vue-core-image-upload';

new Vue({
  el: '#app',
  components: {
    'vue-core-image-upload': VueCoreImageUpload
  },
  data: {
    src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
  },
  methods: {
     imageuploaded(res) {
      if (res.errcode == 0) {
        this.src = 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png';
      }
    }
  }
});

NUXT

import Vue from 'vue';
import VueCoreImageUpload from 'vue-core-image-upload/dist/ssr';

Vue.use( VueCoreImageUpload );

plugins: [
  { src: '~plugins/vue-core-image-upload.js', ssr: false }
]

Demo