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

vue+element图片上传裁剪功能

安装

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

名称类型默认说明
urlString''上传接口地址,如果为空,图片不会上传
methodString'POST'上传方法
fieldString'upload'向服务器上传的文件名
valueBooleantwoWay是否显示控件,双向绑定
paramsObjectnull上传附带其他数据,格式"{k:v}"
headersObjectnull上传header设置,格式"{k:v}"
langTypeString'zh'语言类型,默认中文
langExtObject 语言包自行扩展
widthNumber200最终得到的图片宽度
heightNumber200最终得到的图片高度
imgFormatstring'png'jpg/png, 最终得到的图片格式
imgBgcstring'#fff'导出图片背景色,当imgFormat属性为jpg时生效
noCircleBooleanfalse关闭 圆形图像预览
noSquareBooleanfalse关闭 方形图像预览
noRotateBooleantrue关闭 旋转图像功能
withCredentialsBooleanfalse支持跨域

Events

名称说明
srcFileSet用户选取文件之后, 参数( fileName, fileType, fileSize )
cropSuccess图片截取完成事件(上传前), 参数( imageDataUrl, field )
cropUploadSuccess上传成功, 参数( jsonData, field )
cropUploadFail上传失败, 参数( status, field )

使用

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,这样会导致上传成功之后再次点击图片时候不能正常加载图片,而是应该保留组件的关闭按钮,正常使用关闭按钮关闭

如果觉得我的文章对你有用,请随意赞赏