Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-laravel-image-crop-upload with all npm packages installed. Try it out:

var vueLaravelImageCropUpload = require("vue-laravel-image-crop-upload")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-laravel-image-crop-upload v3.0.1

a vue plgin for image upload and crop

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端,不推荐手机端使用)

GitHub issues GitHub forks GitHub stars Twitter

NPM

中文文档在后面

Change log

@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

Click me.

Screenshot

screenshot

Brower compatibility

IE10+

Env

vue@1/vue@2 + webpack + es6

Install

npm

$ npm install vue-image-crop-upload

Usage

Props

NameTypeDefaultDescription
urlString''Server api path,like "/avatar/upload", If empty, will not be uploaded
fieldString'upload'Upload input filename, used for server side get the file stream.
valueBooleantwoWayshow or not
paramsObjectnullPOST Params,like "{k:v}"
headersObjectnullPOST request header,like "{k:v}"
langTypeString'zh'language type
langExtObjectlanguage extend
widthNumber200width of receive image
heightNumber200height of receive image
imgFormatstring'png'jpg/png, Server api receive file type.
imgBgcstring'#fff'background color, if the imgFormat prop is jpg
noCircleBooleanfalsedisable circle preview
noSquareBooleanfalsedisable square preview
noRotateBooleantruedisable rotate function
withCredentialsBooleanfalsesupport cross-domain

Events

NameDescription
cropSuccessimage crop success, params( imageDataUrl, field )
cropUploadSuccessupload success, params( jsonData, field )
cropUploadFailupload fail, params( status, field )

Language package

Support languageShorthandContributors
中文(default)zhdai-siki
繁体中文zh-tws950329
Englishendai-siki / doriandrn
Russianrubigperson
Romanianrodoriandrn
Portuguese (Brazil)pt-brabensur
Frenchfrvalerymelou
Dutchnlblyleven
Turkishtrsmhayhan
spanish MXes-MXvickvasquez
Germandeattx
JapanesejaKangYoosam
Italianitphaberest
Arabicarbarakat-turki
ukrainianuadvomaks
Uyghurugoyghan
Thaithgodxavia
Myanmarmmtintnaingwinn
Swedishsehekin1
// 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.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"

示例

点我.

截图

screenshot

浏览器兼容

IE10+

配置环境

vue@2(或vue@1) + webpack + es6

安装

npm

$ npm install vue-image-crop-upload

使用

Props

名称类型默认说明
urlString''上传接口地址,如果为空,图片不会上传
fieldString'upload'向服务器上传的文件名
valueBooleantwoWay是否显示控件,双向绑定
paramsObjectnull上传附带其他数据,格式"{k:v}"
headersObjectnull上传header设置,格式"{k:v}"
langTypeString'zh'语言类型,默认中文
langExtObject语言包自行扩展
widthNumber200最终得到的图片宽度
heightNumber200最终得到的图片高度
imgFormatstring'png'jpg/png, 最终得到的图片格式
imgBgcstring'#fff'导出图片背景色,当imgFormat属性为jpg时生效
noCircleBooleanfalse关闭 圆形图像预览
noSquareBooleanfalse关闭 方形图像预览
noRotateBooleantrue关闭 旋转图像功能
withCredentialsBooleanfalse支持跨域

Events

名称说明
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>
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free