π§ A simple and elegant avatar cropping and upload plugin.
$ npm i vue-avatar-cropper
<template>
<div class="text-center">
<img v-if="userAvatar" :src="userAvatar">
<button id="pick-avatar">Select an image</button>
<avatar-cropper
@uploaded="handleUploaded"
trigger="#pick-avatar"
upload-url="/files/upload" />
</div>
</template>
<script>
import AvatarCropper from "vue-avatar-cropper"
export default {
components: { AvatarCropper },
data() {
return {
userAvatar: undefined,
}
},
methods: {
handleUploaded(resp) {
this.userAvatar = resp.relative_url;
}
}
}
</script>
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, the argument is cropperJS instance. |
upload-headers |
Object | Headers of upload request, default: {} |
cropper-options |
Object | Options passed to the cropperJS instance, default: { |
aspectRatio: 1, |
||
autoCropArea: 1, |
||
viewMode: 1, |
||
movable: false, |
||
zoomable: false |
||
} |
||
output-options |
Object | Options passed to the cropper.getCroppedCanvas() method, default: {} . Recommended use-case is specifying an output size, for instance: {width: 512, height: 512} |
output-mime |
String | The resulting avatar image mime type, default: null |
output-quality |
Number | The resulting avatar image quality [0 - 1], default: 0.9 (if the output-mime property is image/jpeg or image/webp ) |
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: "εζΆ"} |
withCredentials |
Boolean | The withCredentials property that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates, default: false |
inline |
Boolean | If true component will be displayed as inline elemenet, default: false |
-
changed user picked a file
file
object, File object.reader
object, FileReader
-
submit right after a click on the submit button
-
cancel when user decides to cancel the upload
-
uploading before submit upload request, params:
form
object, FormData instance.xhr
object, XMLHttpRequest instance.
-
uploaded after request is successful, params:
response
object, json parsed fromxhr.responseText
form
object, FormData instance.xhr
object, XMLHttpRequest instance.
-
completed after request has completed, params:
response
object, json parsed fromxhr.responseText
form
object, FormData instance.xhr
object, XMLHttpRequest instance.
-
error something went wrong, params:
message
error message.type
error type, example:upload
/user
.context
context data.
You can listen these events like this:
<avatar-cropper
trigger="#set-avatar"
upload-url="/files/upload"
@uploading="handleUploading"
@uploaded="handleUploaded"
@completed="handleCompleted"
@error="handlerError"
></avatar-cropper>
...
methods: {
...
handleUploading(form, xhr) {
form.append('foo', 'bar')
},
handleUploaded(response, form, xhr) {
// update user avatar attribute
},
handleCompleted(response, form, xhr) {
// xhr.status
},
handlerError(message, type, xhr) {
if (type == 'upload') {
// xhr.response...
}
}
...
}
...
π There is an online demo:
MIT