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 us...

cuk5239

2922人浏览 · 2020-07-26 22:46:25

cuk5239 · 2020-07-26 22:46:25 发布

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])

<div id="app">
	<a class="btn" @click="toggleShow">set avatar</a>
	<my-upload field="img"
        @crop-success="cropSuccess"
        @crop-upload-success="cropUploadSuccess"
        @crop-upload-fail="cropUploadFail"
        v-model="show"
		:width="300"
		:height="300"
		url="/upload"
		:params="params"
		:headers="headers"
		img-format="png"></my-upload>
	<img :src="imgDataUrl">
</div>

<script>
	import 'babel-polyfill'; // es6 shim
	import Vue from 'vue';
	import myUpload from 'vue-image-crop-upload';

	new Vue({
		el: '#app',
		data: {
			show: true,
			params: {
				token: '123456798',
				name: 'avatar'
			},
			headers: {
				smail: '*_~'
			},
			imgDataUrl: '' // the datebase64 url of created image
		},
		components: {
			'my-upload': myUpload
		},
		methods: {
			toggleShow() {
				this.show = !this.show;
			},
            /**
			 * crop success
			 *
			 * [param] imgDataUrl
			 * [param] field
			 */
			cropSuccess(imgDataUrl, field){
				console.log('-------- crop success --------');
				this.imgDataUrl = imgDataUrl;
			},
			/**
			 * upload success
			 *
			 * [param] jsonData  server api return data, already json encode
			 * [param] field
			 */
			cropUploadSuccess(jsonData, field){
				console.log('-------- upload success --------');
				console.log(jsonData);
				console.log('field: ' + field);
			},
			/**
			 * upload fail
			 *
			 * [param] status    server api return error status, like 500
			 * [param] field
			 */
			cropUploadFail(status, field){
				console.log('-------- upload fail --------');
				console.log(status);
				console.log('field: ' + field);
			}
		}
	});
</script>

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

<div id="app">
	<a class="btn" @click="toggleShow">set avatar</a>
	<my-upload field="img"
		:width="300"
		:height="300"
		url="/upload"
		:params="params"
		:headers="headers"
        lang-type="en"
		:value.sync="show"
		img-format="png"></my-upload>
	<img :src="imgDataUrl">
</div>

<script>
	import 'babel-polyfill'; // es6 shim
	import Vue from 'vue';
	import myUpload from 'vue-image-crop-upload/upload-1.vue';

	new Vue({
		el: '#app',
		data: {
			show: true,
			params: {
				token: '123456798',
				name: 'avatar'
			},
			headers: {
				smail: '*_~'
			},
			imgDataUrl: '' // the datebase64 url of created image
		},
		components: {
			'my-upload': myUpload
		},
		methods: {
			toggleShow() {
				this.show = !this.show;
			}
		},
		events: {
			/**
			 * crop success
			 *
			 * [param] imgDataUrl
			 * [param] field
			 */
			cropSuccess(imgDataUrl, field){
				console.log('-------- crop success --------');
				this.imgDataUrl = imgDataUrl;
			},
			/**
			 * upload success
			 *
			 * [param] jsonData   server api return data, already json encode
			 * [param] field
			 */
			cropUploadSuccess(jsonData, field){
				console.log('-------- upload success --------');
				console.log(jsonData);
				console.log('field: ' + field);
			},
			/**
			 * upload fail
			 *
			 * [param] status    server api return error status, like 500
			 * [param] field
			 */
			cropUploadFail(status, field){
				console.log('-------- upload fail --------');
				console.log(status);
				console.log('field: ' + field);
			}
		}
	});

</script>

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

vue头像上传裁剪组件

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^