vue头像裁剪插件_一个简单而优雅的头像裁剪和上传插件

vue头像裁剪插件

Vue头像作物 (Vue Avatar Cropper)

A simple and elegant avatar cropping and upload plugin.

一个简单而优雅的头像裁剪和上传插件。

View demo 查看演示 View Github 查看Github

正在安装 (Installing)

$  npm i vue-avatar-cropper

用法 (Usage)

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

物产 (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, 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: {width: 512, height: 512}
output-mime	String	The resulting avatar image mime type, default: image/jpeg
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: "取消"}

物业名称	类型	描述
trigger	字符串|元素	触发头像选择的元素
upload-url	串	上传裁剪图片的网址
upload-form-name	目的	上载请求的表单名称，默认值：“文件”
upload-form-data	目的	其他表单数据，默认值：“ {}”
upload-handler	功能	替换默认上传处理程序的处理程序，其参数为cropperJS实例。
upload-headers	目的	上载请求的标题，默认值： {}
cropper-options	目的	传递给cropperJS实例的选项， 默认值： {
		aspectRatio: 1,
		autoCropArea: 1,
		viewMode: 1,
		movable: false,
		zoomable: false
		}
output-options	目的	传递给cropper.getCroppedCanvas()方法的选项， 默认值： {width: 512, height: 512}
output-mime	串	生成的头像图片mime类型，默认值： image/jpeg
output-quality	数	生成的头像图像质量[0-1]，默认值： 0.9 (如果output-mime属性为image/jpeg或image/webp )
mimes	串	允许的图像格式，默认： image/png, image/gif, image/jpeg, image/bmp, image/x-icon
labels	目的	按钮的标签，默认值： { submit: "提交", cancel: "取消"}

大事记 (Events)

• changed user picked a file

  更改的用户选择了一个文件

  • file object, file对象， File object.文件对象。
  • reader object, reader对象FileReaderFileReader

• submit right after a click on the submit button

  提交按钮点击后立即提交

• uploading before submit upload request, params:

  上传之前提交上传请求，则params：

  • form object, form对象， FormData instance.FormData实例。
  • xhr object, xhr对象， XMLHttpRequest instance.XMLHttpRequest实例。

• uploaded after request is successful, params:

  请求成功后上传 ，参数：

  • response object, json parsed from xhr.responseText
  • response对象，从xhr.responseText解析为xhr.responseText
  • form object, form对象， FormData instance.FormData实例。
  • xhr object, xhr对象， XMLHttpRequest instance.XMLHttpRequest实例。

• completed after request has completed, params:

  请求完成后完成，参数：

  • response object, json parsed from xhr.responseText
  • response对象，从xhr.responseText解析为xhr.responseText
  • form object, form对象， FormData instance.FormData实例。
  • xhr object, xhr对象， XMLHttpRequest instance.XMLHttpRequest实例。

• error something went wrong, params:

  错误出了点问题，参数：

  • message error message.message错误消息。
  • type error type, example: type错误类型，例如： upload/upload / user.user 。
  • context context data.context上下文数据。

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

翻译自: https://vuejsexamples.com/a-simple-and-elegant-avatar-cropping-and-upload-plugin/

vue头像裁剪插件