vue 移动端头像裁剪_vue头像上传裁剪组件_一个漂亮的Vue组件，用于图像裁剪和上传...

vue头像上传裁剪组件

vue-image-crop-upload (vue-image-crop-upload)

A beautiful vue component for image crop and upload.

一个漂亮的vue组件，用于图像裁剪和上传。

Notice: This component is designed for pc, not recommended for use on the mobile side.

注意：此组件是为PC设计的，不建议在移动设备上使用。

View Demo 查看演示 Download Source 下载源

浏览器兼容性 (Brower compatibility)

IE10+

IE10 +

环保 (Env)

[email protected]/[email protected] + webpack + es6

[受电子邮件保护] / [受电子邮件保护] + webpack + es6

安装 (Install)

npm (npm)

$ npm install vue-image-crop-upload

用法 (Usage)

道具 (Props)

Name

Type

Default

Description

url

String

''

Server api path,like "/avatar/upload", If empty, will not be uploaded

method

String

'POST'

request http method

field

String

'upload'

Upload input filename, used for server side get the file stream.

value

Boolean

twoWay

show or not

params

Object

null

POST Params，like "{k:v}"

headers

Object

null

POST request header，like "{k:v}"

langType

String

'zh'

language type

langExt

Object

language extend

width

Number

200

width of receive image

height

Number

200

height of receive image

imgFormat

string

'png'

jpg/png, Server api receive file type.

imgBgc

string

'#fff'

background color, if the imgFormat prop is jpg

noCircle

Boolean

false

disable circle preview

noSquare

Boolean

false

disable square preview

noRotate

Boolean

true

disable rotate function

withCredentials

Boolean

false

support cross-domain

名称

类型

默认

描述

网址

串

''

服务器api路径，例如“ / avatar / upload”，如果为空，则不会上传

方法

串

'POST'

请求http方法

领域

串

“上传”

上传输入文件名，用于服务器端获取文件流。

值

布尔型

双向

显示或不显示

参数

目的

空值

POST参数，例如“ {k：v}”

标头

目的

空值

POST请求标头，例如“ {k：v}”

langType

串

zh

语言类型

langExt

目的

语言扩展

宽度

数

200

接收图像的宽度

高度

数

200

接收图像的高度

img格式

串

'png'

jpg / png，服务器api接收文件类型。

imgBgc

串

'#fff'

背景颜色(如果imgFormat道具是jpg)

无圆

布尔型

假

禁用圈子预览

面积不大

布尔型

假

禁用方形预览

不旋转

布尔型

真正

禁用旋转功能

withCredentials

布尔型

假

支持跨域

大事记 (Events)

Name

Description

srcFileSet

Once you've selected the file, params( fileName, fileType, fileSize )

cropSuccess

image crop success, params( imageDataUrl, field )

cropUploadSuccess

upload success, params( jsonData, field )

cropUploadFail

upload fail, params( status, field )

名称

描述

srcFileSet

选择文件后，params(fileName，fileType，fileSize)

作物成功

图像裁剪成功，参数(imageDataUrl，字段)

cropUploadSuccess

上传成功，参数(jsonData，field)

cropUploadFail

上传失败，参数(状态，字段)

语言包 (Language package)

Support language

Shorthand

Contributors

中文(default)

zh

dai-siki

繁体中文

zh-tw

s950329

English

en

dai-siki / doriandrn

Russian

ru

bigperson

Romanian

ro

doriandrn

Portuguese (Brazil)

pt-br

abensur

French

fr

valerymelou

Dutch

nl

blyleven

Turkish

tr

smhayhan

spanish MX

es-MX

vickvasquez

German

de

attx

Japanese

ja

KangYoosam

Italian

it

phaberest

Arabic

ar

barakat-turki

ukrainian

ua

dvomaks

Uyghur

ug

oyghan

Thai

th

godxavia

Myanmar

mm

tintnaingwinn

Swedish

se

hekin1

支持语言

速记

贡献者

中文(默认)

zh

大树

繁体中文

zh-tw

s950329

英语

恩

大斯基/多里安德恩

俄语

RU

大人物

罗马尼亚语

RO

多里安

葡萄牙语(巴西)

pt-br

阿本苏尔

法文

fr

瓦莱里米卢

荷兰语

nl

bleveneven

土耳其

tr

hay

西班牙MX

es-MX

维克瓦克斯

德语

德

attx

日本

ja

姜佑三

义大利文

它

最强

阿拉伯

AR

巴拉卡特-图尔基

乌克兰

ua

德沃马克

维吾尔族

ug

Oyghan

泰国

日

Godxavia

缅甸

毫米

丁宁温

瑞典

SE

hekin1

// example

{

en: {

hint: 'Click or drag the file here to upload',

loading: 'Uploading…',

noSupported: 'Browser is not supported, please use IE10+ or other browsers',

success: 'Upload success',

fail: 'Upload failed',

preview: 'Preview',

btn: {

off: 'Cancel',

close: 'Close',

back: 'Back',

save: 'Save'

},

error: {

onlyImg: 'Image only',

outOfSize: 'Image exceeds size limit: ',

lowestPx: 'Image\'s size is too low. Expected at least: '

}

}

}

示例[受电子邮件保护] (Example [email protected])

示例[受电子邮件保护] (Example [email protected])

翻译自: https://vuejsexamples.com/a-beautiful-vue-component-for-image-cropping-and-uploading/

vue头像上传裁剪组件