上传宫格

上传宫格布局组件。

提示

此组件只用于布局，不包含上传功能，请自行实现上传功能。

基础使用

通过 list 属性设置上传文件列表。

<template>
	<pure-upload-grid :list="list"></pure-upload-grid>
</template>

<script setup>
	import { ref } from "vue";

	// 文件列表
	const list = ref([
		{
			status: "waiting",
			path: "/static/images/w_1.jpeg",
			progress: 0
		}
		// ...
	]);
</script>

数据格式

list 是一个数组，每个元素是一个对象，对象属性如下：

• status：上传状态
  • waiting：等待上传
  • uploading：上传中
  • success：上传成功
  • error：上传失败
• path：预览图路径，或通过 coverKey 自定义封面图键值。
• progress：文件上传进度。

完整示例

<template>
	<pure-upload-grid
		:list="list"
		:cover-key="path"
		@onChoose="handleChoose"
		@onDelete="handleDelete"
	></pure-upload-grid>

	<!-- 上传 -->
	<pure-button
		text="上传文件"
		block
		theme="primary"
		@onClick="handleUpload"
	></pure-button>
</template>

<script setup>
	import { ref } from "vue";

	// 文件列表
	const list = ref([
		{
			status: "waiting",
			path: "/static/images/w_1.jpeg",
			progress: 0
		}
	]);

	// 点击了上传按钮 - 选择文件
	// count: 剩余可选数量
	function handleChoose(count) {
		uni.chooseImage({
			count,
			success: (res) => {
				const files = res.tempFiles;

				// 循环处理文件数据
				files.forEach((item, index) => {
					// 构建列表数据结构
					// 重要提示：不要直接在 item 上操作
					// 因为 item 是个文件对象
					// 在实际测试中发现，如果直接给 item 添加 status、progress 等数据，数据会失去响应性
					// 所以这里要单独构建一个对象，避免直接操作 item
					list.value.push({
						status: "waiting",
						path: item.path,
						file: item
					});
				});
			}
		});
	}

	// 上传文件
	function handleUpload() {
		// 遍历文件列表，模拟上传
		list.value.forEach((item, index) => {
			onUpload(item, index);
		});
	}

	// 模拟上传
	function onUpload(item, index) {
		// 首先将状态更新为上传中
		item.status = "uploading";

		// 模拟上传进度
		let interval = setInterval(() => {
			// 随机 0-1 的数字
			const random = Math.random();

			// 判断是否上传完成
			if (item.progress >= 100) {
				// 上传完成
				// 清除定时器
				clearInterval(interval);

				// 模拟上传成功或失败
				// 更新上传状态
				item.status = index % 2 === 0 ? "success" : "fail";
			} else {
				// 上传中
				// 更新上传进度
				item.progress = item.progress + random;
			}
		}, 50);
	}

	// 删除文件
	// index: 删除的索引
	// item: 删除的项
	function handleDelete(index, item) {
		list.value.splice(index, 1);
	}
</script>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
cols	[Number, String]	3	列数
gap	String	10px	列表项间隔
list	Array	[]	文件列表
ratio	String	1:1	列表项的宽高比
coverKey	String	path	封面图片键名
coverMode	String	aspectFill	封面图片裁剪模式
maxCount	Number	9	最大上传数量
uploadingIconName	String		上传中图标名称
uploadingIconMode	String	undefined	上传中图标裁剪模式
uploadingIconOpts	Object	{}	上传中图标配置 参考
uploadingText	String		上传中文字
failIconName	String	__tips	上传失败图标名称
failIconMode	String	undefined	上传失败图标裁剪模式
failIconOpts	Object	{}	上传失败图标配置 参考
failText	String		上传失败文字
deleteIconName	String	__trash	删除图标名称
deleteIconMode	String	undefined	删除图标裁剪模式
deleteIconOpts	Object	{}	删除图标配置 参考
previewIconName	String	__eye	预览图标名称
previewIconMode	String	undefined	预览图标裁剪模式
previewIconOpts	Object	{}	预览图标配置 参考
btnIconName	String	__upload	上传按钮图标名称
btnIconMode	String	undefined	上传按钮图标裁剪模式
btnIconOpts	Object	{}	上传按钮图标配置 参考
btnText	String		上传按钮文字
showProgress	Boolean	true	是否显示上传进度
showProgressText	Boolean	true	是否显示上传进度文字
progressSize	String	4px	进度条高度
progressOpts	Object	{}	进度条配置 参考

事件

名称	参数	说明
onChoose	count: 剩余可选数量	点击上传按钮进行选择文件事件
onDelete	index: 下标, item: 数据项	删除事件

插槽

名称	参数	说明
#waiting		等待上传状态
#uploading		上传中状态
#fail		上传失败状态
#success		上传成功状态

样式变量

名称	说明
--pure-upload-grid-columns	列数
--pure-upload-grid-gap	间距
--pure-upload-grid-item-background	项目背景
--pure-upload-grid-item-border-radius	项目圆角
--pure-upload-grid-item-status-background	状态背景
--pure-upload-grid-item-status-color	状态文本颜色
--pure-upload-grid-item-status-gap	状态内容间距
--pure-upload-grid-item-status-icon-font-size	状态图标字体大小
--pure-upload-grid-item-status-icon-color	状态图标颜色
--pure-upload-grid-loading-animation-duration	加载动画时长
--pure-upload-grid-loading-animation-timing-function	加载动画时间函数
--pure-upload-grid-item-status-text-font-size	状态文本字体大小
--pure-upload-grid-item-status-text-font-weight	状态文本字体粗细
--pure-upload-grid-item-status-progress-direction	进度条布局方向
--pure-upload-grid-item-status-progress-gap	进度条内容间距
--pure-upload-grid-item-status-progress-width	进度条宽度
--pure-upload-grid-item-status-progress-track-color	进度条轨道颜色
--pure-upload-grid-item-status-progress-margin	进度条外边距
--pure-upload-grid-item-status-progress-text-font-size	进度条文本字体大小
--pure-upload-grid-upload-button-color	上传按钮文本颜色
--pure-upload-grid-upload-button-icon-font-size	上传按钮图标字体大小
--pure-upload-grid-upload-button-icon-font-weight	上传按钮图标字体粗细
--pure-upload-grid-upload-button-text-font-size	上传按钮文本字体大小
--pure-upload-grid-upload-button-text-font-weight	上传按钮文本字体粗细