1.0.8 • Published 3 years ago
ImageUpload图片上传组件
import ImageUpload from 'com-components';
参数
| API | 可选参数 | 描述 | 默认参数 | 类型 |
|---|
| url | 必填 | 上传图片的url链接 | '' | string |
| accept | 必填 | 上传文件类型 | .jpg,.jpeg,.png | string |
| name | | 文件上传名称 | file | string |
| data | | 文件上传的额外参数 | {} | object |
| headers | | 文件上传额外header信息 | {} | object |
| action | 必填 | 文件上传接口路径 | '' | object |
| withCredentials | true/false | 是否携带cookie | false | boolean |
| uploadText | | 上传文案 | ‘上传’ | string |
| tipText | | 上传框提示文案 | '' | string |
| extraRender | | 额外的操作项渲染(除删除外操作) | | ReactNode |
| rule | | 图片校验规则 | | object |
方法
| API | 可选参数 | 描述 | 默认参数 | 类型 |
|---|
| beforeUpload | | 图片上传前的回调,返回Promise对象，返回resolve则继续上传,resolve参数会加入formData，reject则终止上传 | (file, fileList) => Promise | function |
| onChange | | 图片上传成功的回调 | data => Function | function |
| errorChange | | 图片格式/大小/类型校验失败的回调 | （file,fileList）=> Function | function |
| handleDelete | | 图片删除的回调 | () => Function | function |
Rule规则
| API | 可选参数 | 描述 | 默认参数 | 类型 |
|---|
| strict | true/false | 是否开启严格校验模式，严格校验模式主要针对宽、高 | false | boolean |
| types | 必填 | 上传图片的格式 | 'image/jpeg', 'image/jpg', 'image/png', 'image/gif' | string[] |
| width | 严格模式下必填 | 上传图片的宽度 | | number |
| height | 严格模式下必填 | 上传图片的高度 | | number |
| minWidth | 非必填，严格模式下不生效 | 上传图片的最小宽度 | | number |
| minHeight | 非必填，严格模式下不生效 | 上传图片的最小高度 | | number |
| weight | 非必填 | 上传图片的大小，精确到KB（1M = 1024KB） | | number |
| errorLimits | 非必填，严格模式下不生效 | 上传图片的宽高比 | | number,number |
| errorCallback | 非必填 | 上传图片校验错误时的回调，不传则采用内置形式抛出校验错误信息,参数info返回当前图片校验的错误类型，图片类型/图片大小/图片宽高，rule为传入的图片校验规则，file为当前校验的文件 | (info:{ error: type/weight/size/errorLimits, type, size, width, height }, rule, file) => Function | function |