@mas.io/mas-upload-pic NPM

tnpm install --save @alipay/mas-upload-pic

组件介绍

行业小程序图片上传组件。

API

参数名称	填写要求	参数类型	参数说明	默认值	示例
action	必填	String	上传服务器地址	-	-
imgList	必填	Array	已上传图片的列表(每项至少要有url属性)	[]	{url: 'http: xxx.png'}
className	非必填	String	class	-	'my-class'
fileName	非必填	String	文件名，后端取图片时用	'file'	'myFileName'
maxNum	非必填	String/Number	允许上传最大数量	1	3
width	非必填	String/Number	图片宽度(px)	'80'	'100'
height	非必填	String/Number	图片高度(px)	'80'	'100'
canDelete	非必填	Boolean	图片是否支持删除	false	true
formData	非必填	Object	HTTP 请求中其他额外的 form 数据	-	{id: 'xxx'}
title	非必填	String	标题	无	'组件自带的标题'
showNum	非必填	Boolean	标题右侧显示图片数量（需要先设置设置title）	false	true
tipText	非必填	String	标题中间问号提示（需要先设置设置title）	-	'弹窗提示文案'
addImgUrl	非必填	String	添加按钮图片链接	+	-
onSuccess	必填	Function	上传成功的回调，出参为接口返回的数据	无	onSuccess: (res: object) => {},
onDelete	非必填	Function	canDelete为true时必传删除按钮点击时调用，出参为当前图片index+当前图片内容 {index, item}	-	onDelete: (res: object) => {},

在小程序中使用

{
  "usingComponents": {
    "mas-upload-pic": "@alipay/mas-upload-pic/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
<mas-upload-pic
  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  imgList="{{imgList}}"
  maxNum="4",
  canDelete="{{true}}"
  onSuccess="onSuccess"
  onDelete="onDelete"
/>

Badges

@mas.io/any-style @mas.io/falcon-core

@infinitebrahmanuniverse/nolb-_mas @everything-registry/sub-chunk-583

0.0.3

2 years ago