jasonccs / vue2-upload-img Goto Github PK

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

Demo

Props

上传多个文件

multiple

你可以使用 multiple 属性设置为true来实现多文件的上传。需要注意的是，你设置了该属性后,服务端收到文件上传的字段数据会是一个数组。

multiple-size

你可以使用multiple-size来限制图片的数量，你可以限制上传文件的数量。 <vue-core-image-upload class="btn btn-primary" :crop="false" @imageuploaded="imageUploded" :max-file-size="5242880" :multiple="true" :multiple-size="4" url="http://101.198.151.190/api/upload2.php" >

响应事件

我们在上传的不同阶段指定了不同的派发事件，你可以绑定每个事件的响应方法，实现对于流程的控制。

imageuploaded

当图片上传完，会调用该事件绑定的函数，并且用户可以获取到服务端返回的数据。

imagechanged

当input框改变选择图片时候触发，会返回input的获取的图片数据

imageuploading

当图片上传过程中触发，你可以自定义你需要处理的内容比如显示加载动画等。

errorhandle

当图片上传发生错误的时候触发，会返回错误状态信息

Code Example

Contributions

Your contributions and suggestions are welcome 😄😄😄💐💐💐.