com-components

react图片上传组件

Usage no npm install needed!

<script type="module">
  import comComponents from 'https://cdn.skypack.dev/com-components';
</script>

README

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