上传 Upload

用于图片上传

静态组件模版渲染

单图上传

显示代码

<div class="open-container">
	<div id="upload-one" class="open-upload" >
		<div class="open-upload-img"></div>
		<div class="open-upload-box">
			<input type="file" class="open-upload-input" openui-type="image/png|image/jpeg|image/webp" >
			<p class="open-upload-icon"></p>
		</div>
	</div>
</div>

// 自动渲染静态模版
openui.upload.renderStatic();

// 监听静态组件上传事件
// 调用组件on方法，参数是静态组件id
// 选择图片后会返回图片信息
upload.on('#upload-two',function(res){
	console.log(res)
})

多图上传

input元素添加"multiple"属性即可,默认最多选择9张图

显示代码

<div class="open-container">
	<div id="upload-two" class="open-upload" >
		<div class="open-upload-img"></div>
		<div class="open-upload-box">
			<input type="file" class="open-upload-input" openui-type="image/png|image/jpeg|image/webp" multiple>
			<p class="open-upload-icon"></p>
		</div>
	</div>
</div>

// 自动渲染静态模版
openui.upload.renderStatic();

// 监听静态组件上传事件
// 调用组件on方法，参数是静态组件id
// 选择图片后会返回图片信息
upload.on('#upload-one',function(res){
	console.log(res)
})

动态组件渲染

单图上传

显示代码

<div class="open-container">
	<div id="upload-three"></div>
</div>

// 动态渲染upload
openui.upload.render({
	id: '#upload-three',
	type: 'image/png|image/jpeg|image/webp',
	limit: 6,
	size: '100px',
	multiline: true,
	before: function(files){
		console.log(files)
	},
	click: function(res){
		console.log(res)
	}
})

API

API	描述
upload.render(options)	动态渲染方法
upload.renderStatic()	静态渲染方法
upload.on(id,()=>{})	事件监听方法

动态渲染方法

upload.render(options)

• 参数options:基础属性配置

属性名	描述	类型	必填	默认值
id	dom选择器	string	是	-
type	图片过滤类型	string	否	"image/png | image/jpeg | image/webp"
multiline	是否开启多选	boolean	否	false
limit	设置最大选几张，最多只能选9	number	否	9
size	图片选择器大小：宽和高	string	否	80px

• 回调函数

options.click 选择图片预览后的回调函数

// 单图模式下返回图片对象
click: function(file){
	console.log(file)
}

// 多图模式下返回图片列表对象
click: function(files){
	console.log(files)
}

静态渲染方法

upload.renderStatic() 自动获取页面符合条件的dom元素进行初始化渲染

事件监听方法

upload.on(id,(res)=>{})

// 选择图片时，会触发组件监听方法
// 返回当前操作图片信息
// 静态组件，动态组件都会触发
upload.on(id,(res)=>{
	console.log(res)
})