vue+element图片上传裁剪功能

项目地址：https://github.com/dai-siki/vue-image-crop-upload

[button color="info" icon="github" url="https://github.com/dai-siki/vue-image-crop-upload" type=""]GitHub下载[/button]

安装

npm install vue-image-crop-upload --save

如果切换了国内镜像，推荐使用下面的指令，安装更快

cnpm install vue-image-crop-upload --save

安装npm和cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

参数及说明

Props

Events

使用

import imageUpload from 'vue-image-crop-upload/upload-2';

然后在 components中注册组件

  components:{
    'image-upload':imageUpload
  },

在 <template></template>模板中插入组件

      <image-upload field="file"
                    @crop-upload-success="cropUploadSuccess"
                    @crop-upload-fail="cropUploadFail"
                    v-model="show"
                    :width="300"
                    :height="300"
                    url="/upload"
                    :params="params"
                    :headers="headers"
                    img-format="png"></image-upload>

创建钩子函数

    cropUploadSuccess(jsonData, field){
      console.log('-------- upload success --------');
      console.log(jsonData);
      console.log('field: ' + field);
    },
    cropUploadFail(status, field){
      console.log('-------- upload fail --------');
      console.log(status);
      console.log('field: ' + field);
    }

cropUploadSuccess对图片上传成功后的处理，会根据 url="/upload"路径返回状态码和结果，使用 jsonData就可以获取到。

注意点

image-upload组件不需要添加在上传成功后自动关闭的代码，例如在图片上传成功之后，让 v-model="show"的值为false，这样会导致上传成功之后再次点击图片时候不能正常加载图片，而是应该保留组件的关闭按钮，正常使用关闭按钮关闭