Ecross-avatar NPM

Installing

$  npm i ecross-avatar --save-dev

Usage

import AvatarCropper from 'ecross-avatar'

<button type="button" class="btn btn-primary" id="set-avatar">Update avatar</button>

<avatar-cropper
    trigger="#set-avatar"
    upload-url="/files/upload"
></avatar-cropper>

Properties

Property Name	Type	Description
`trigger`	String\|Element	The element to trigger avatar pick
`upload-url`	String	Url of upload croppped image
`upload-form-name`	Object	Form name of upload request, default: 'file'
`upload-form-data`	Object	Additional form data, default: '{}'
`upload-handler`	Function	Handler to replace default upload handler
`upload-headers`	Object	Headers of upload request, default: `{}`
`mimes`	String	Allowed image formats, default: `image/png, image/gif, image/jpeg, image/bmp, image/x-icon`
`labels`	Object	Label for buttons, default: `{ submit: "提交", cancel: "取消"}`

Events

uploading before submit upload request, params:
- form object, FormData instance.
- xhr object, XMLHttpRequest instance.
uploaded after request has finished, params:
- response object, json parsed from xhr.responseText
- form object, FormData instance.
- xhr object, XMLHttpRequest instance.

You can listen these events like this:

<avatar-cropper
    trigger="#set-avatar"
    upload-url="/files/upload"
    @uploading="handleUploading"
    @uploaded="handleUploaded"
></avatar-cropper>

    ...
    methods: {
        ...
        handleUploading(form. xhr) {
            form.append('foo', 'bar')
        },
        handleUploaded(response, form, xhr) {
            // update user avatar attribute
        }
        ...
    }
    ...

License

MIT

vue cropper vue-cropper vue-avatar avatar-cropper vue-avatar-cropper

@infinitebrahmanuniverse/nolb-ecr @everything-registry/sub-chunk-1552 @zalastax/nolb-ecr

0.0.17

6 years ago

0.0.16

6 years ago

0.0.15

6 years ago