# ImageEditUpload api

## 实例

```html
<template>
  <div class="demo">
    <image-edit-upload
      :action="action"
      :headers="headers"
      ></image-edit-upload>
  </div>
</template>

<script>
import ImageEditUpload from "@/components/common/ImageEditUpload";

export default {
  name: "demo",
  components: {
    ImageEditUpload
  },
  data() {
    return {
      action: "/enrolling/enrolling/common/upload/planId/schoolId",
      headers: {
        Authorization: '123'
      }
    };
  }
};
</script>
```

## ImageEditUpload props

| 属性             | 说明                                                                                                                                        | 类型     | 默认值         |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------- |
| def-image        | 默认的显示的图片地址                                                                                                                        | String   | -              |
| action           | 上传的地址，必填                                                                                                                            | String   | -              |
| headers          | 设置上传的请求头部                                                                                                                          | Object   | {}             |
| data             | 上传时附带的额外参数                                                                                                                        | Object   | -              |
| name             | 上传的文件字段名                                                                                                                            | String   | file           |
| with-credentials | 支持发送 cookie 凭证信息                                                                                                                    | Boolean  | false          |
| show-upload-list | 是否显示已上传文件列表                                                                                                                      | Boolean  | true           |
| accept           | 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)                                           | String   | -              |
| format           | 支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用 | Array    | ["jpg", "png"] |
| max-size         | 文件大小限制，单位 kb                                                                                                                       | Number   | 2 * 1024       |
| ratio-type       | 图片裁剪的宽高比例,rectangle:3/4，square:1/1，double:1/2                                                                                    | String   | rectangle      |
| on-progress      | 文件上传时的钩子，返回字段为 event, file                                                                                                    | Function | -              |
| on-success       | 文件上传成功时的钩子，返回字段为 response, file                                                                                             | Function | -              |
| on-error         | 文件上传失败时的钩子，返回字段为 error, file                                                                                                | Function | -              |
| on-format-error  | 文件格式验证失败时的钩子，返回字段为 file                                                                                                   | Function | -              |
| on-exceeded-size | 文件超出指定大小限制时的钩子，返回字段为 file                                                                                               | Function | -              |