安装
npm install vue-image-crop-upload
npm install –save-dev babel-polyfill
示列
1
2
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 )
注意 : 该组件适用于pc端,不推荐手机端使用
来源:https://www.npmjs.com/package/vue-image-crop-upload