lq-vue-image-crop-upload
v2.5.0
Published
a vue plgin for image upload and crop（vue图片剪裁上传插件）
Downloads
3
Maintainers
kwong_kkReadme
版权来自原作者，此包仅为解决组件冲突问题使用
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端，不推荐手机端使用)
中文文档在后面
Change log
@2.5.0
- added http method prop (thanks @sarco3t)
@2.4.0
- Added the src-file-set event, emit event when file is selected (thanks @choruru)
@2.3.3
- Added the Swedish language pack (thanks @hekin1)
- Added the Myanmar language pack (thanks @tintnaingwinn)
@2.3.2
- Added the Thai language pack (thanks @godxavia)
@2.3.1
- Added the Uygur language pack (thanks @oyghan)
@2.3.0
- If the exported picture is in jpg format, the background is white by default, and you can customize it with the "imgBgc" attribute. If it is png, the default transparent color
- Optimized image rotation
- Added the Italian language pack (thanks @phaberest)
- Added the Arabic language pack (thanks @barakat-turki)
- Added the Ukrainian language pack (thanks @dvomaks)
@2.2.3
- Added the Japanese language pack (thanks @KangYoosam)
@2.2.2
- Added the German language pack (thanks @attx)
@2.2.1
- Added the Chinese Traditional language pack (thanks @s950329)
@2.1.0
- Strengthen the function of image rotation and does not display square preview picture
@2.0.5
- Added the spanish MX language pack (thanks @vickvasquez)
@2.0.4
- Added the Turkish language pack (thanks @smhayhan)
@2.0.2
- Added the Dutch language pack (thanks @blyleven)
@2.0.1
- If url prop is empty, the picture will not be uploaded
@2.0.0
- Adjust the import mode for different versions of vue, The default vue version is vue2
- Added the French language pack (thanks @valerymelou)
- Added the Portuguese (Brazil) language pack (thanks @abensur)
@1.3.5
- Added the Romanian language pack (thanks @doriandrn)
@1.3.0
- Added the Russian language pack (thanks @bigperson)
- Added a new Props: "headers" (Used to set the POST request header)
@1.2.0
- Compatible vue2
@1.1.0
- Adjusted Props naming: "otherParams"=>"params", "langConf"=>“langExt”
- Optimized language packs
Demo
Screenshot
Brower compatibility
IE10+
Env
vue@1/vue@2 + webpack + es6
Install
npm
$ npm install vue-image-crop-uploadUsage
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 |
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 ) |
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 |
// 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 vue@2
<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 vue@1
<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>中文文档
更新日志
@2.4.0
- 增加了“src-file-set”回调事件，在用户选择文件之后触发。
@2.3.0
- 如果导出图片格式为jpg，则背景默认白色，你也可以通过新增的“imgBgc”属性自定义。如果导出格式为png，则默认透明
- 优化了旋转效果
@2.1.0
- 增加了图片旋转和不显示方形预览图片的功能
@2.0.0
- 默认支持版本改为vue2，vue1的同学需要引入upload-1.vue
@1.3.0
- 添加了新属性: "headers" (用于设置请求头部：setRequestHeader)
@1.2.0
- 兼容vue@2版本
@1.1.0
- 调整了Props命名: "otherParams"=>"params", "langConf"=>"langExt"
示例
点我.
截图
浏览器兼容
IE10+
配置环境
vue@2（或vue@1） + webpack + es6
安装
npm
$ npm install vue-image-crop-upload使用
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 ) |
自带语言包
{
zh: {
hint: '点击，或拖动图片至此处',
loading: '正在上传……',
noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
success: '上传成功',
fail: '图片上传失败',
preview: '头像预览',
btn: {
off: '取消',
close: '关闭',
back: '上一步',
save: '保存'
},
error: {
onlyImg: '仅限图片格式',
outOfSize: '单文件大小不能超过 ',
lowestPx: '图片最低像素为（宽*高）：'
}
}
}使用示例 vue@1
<div id="app">
<a class="btn" @click="toggleShow">设置头像</a>
<my-upload field="img"
:width="300"
:height="300"
url="/upload"
:params="params"
:headers="headers"
: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 服务器返回数据，已进行json转码
* [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>使用示例 vue@2
<div id="app">
<a class="btn" @click="toggleShow">设置头像</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 服务器返回数据，已进行json转码
* [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>