suitUpload 图片上传组件

使用

<template>
	<view style="padding: 15px;">
		<suit-upload></suit-upload>
		<text>反选传递数组</text>
		<suit-upload :listOption="listOptions"></suit-upload>
		<text>反选传递对象 + 单选</text>
		<suit-upload :listOption="listOptionObj" :multiple="false" uploadText="我要上传啦"></suit-upload>
		<text>最大选择图片的数量 + 不显示删除按钮</text>
		<suit-upload :maxCount="3" :deletable="false" uploadIconColor="blue" uploadText="我要上传啦"></suit-upload>
		<text>自定义上传按钮，不写slot就是按钮样式</text>
		<suit-upload customUpload buttonText="啊啊哈哈哈" buttonType="error" :maxSize="2"></suit-upload>
		<!-- 拍照 -->
		<suit-upload :multiple="false" :maxCount="9" :capture="['album', 'camera']" :accept="'image'"></suit-upload>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				listOptions: [
					{
						url: 'https://tech.suitbim.com/stec-platform-doc/img/wKhjGmKKzqGEeyrHAAAAAB777_k983.png'
					}
				],
				listOptionObj: {
					url: 'https://tech.suitbim.com/stec-platform-doc/img/wKhjGmJ911eEJib7AAAAANuyis0843.png'
				}
			}
		}
	}
</script>

参数说明

属性

属性	描述	类型	可选值	默认值
listOption	展示的图片，如果需要进行反选图片可在这个参数上面传值。对象格式：{url: http://...}; 数组格式：[{url: https: //...}]	Object/String	——	——
name	作为upload组件的标识	String/Number	——	——
multiple	是否可以多选	Boolean	true, false	true
maxCount	最大选择图片的数量，达到这个数量上传的图标会消失	Number	———	5
apiUrl	文件上传的接口	String	——	'/rest/doc/uploadFile'
formData	接口需要上传的其它参数	Object	——	{ projectId: uni.getStorageSync(PROJECT).id }
customUpload	自定义上传的样式, 这个置为true如果不写slot就是按钮样式,buttonUpload这个默认是true	Boolean	true, false	false
buttonUpload	文件上传样式为按钮	Boolean	true, false	true
buttonText	文件上传的样式为按钮，按钮上面的文字，在buttonUpload为true的时候生效	String	——	上传
buttonType	文件上传按钮的颜色，在buttonUpload为true的时候生效	String	info / primary / error/ warning / success	primary
deletable	图片的右上角是否显示删除	Boolean	true, false	true
imageMode	点击已上传好的图片为预览模式，预览图片的剪裁模式 ；和image组件mode属性一致	String	——	aspectFill
uploadIconColor	默认上传样式的图标的颜色	String	——	'#D3D4D6'
uploadText	默认上传样式的提示文字	String	——	''
maxSize	上传文件的大小，单位是M	String	——	5
accept	接受的文件类型，file只支持H5（只有微信小程序才支持把accept配置为all、media）	String	all / media / image / file / video	image
capture	图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头	String/Array	——	['album', 'camera']

事件

事件名称	说明	回调参数
afterUpload	文件上传后调用, 回调参数为已上传的文件，是一个数组	fileLists
deletePic	文件删除后调用, 回调参数为已删除的文件，是一个对象	delList

slot

插槽	说明
默认的	customUpload这个属性为true的时候起作用，自定义上传样式

组件源码及综合示例参考

组件源码 (opens new window)