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]

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

名称 类型 默认 说明
url String '' 上传接口地址,如果为空,图片不会上传
method String 'POST' 上传方法
field String 'upload' 向服务器上传的文件名
value Boolean twoWay 是否显示控件,双向绑定
params Object null 上传附带其他数据,格式"{k:v}"
headers Object null 上传header设置,格式"{k:v}"
langType String 'zh' 语言类型,默认中文
langExt Object 语言包自行扩展
width Number 200 最终得到的图片宽度
height Number 200 最终得到的图片高度
imgFormat string 'png' jpg/png, 最终得到的图片格式
imgBgc string '#fff' 导出图片背景色,当imgFormat属性为jpg时生效
noCircle Boolean false 关闭 圆形图像预览
noSquare Boolean false 关闭 方形图像预览
noRotate Boolean true 关闭 旋转图像功能
withCredentials Boolean false 支持跨域

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

版权声明:
作者:北忘山
文章:vue+element图片上传裁剪功能
链接:https://www.beiwangshan.com/archives/156.html
来源:beiwangshan.com
文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>