上传列表

上传列表布局组件。

提示

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

基础使用

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

<template>
	<pure-upload-list :list="list"></pure-upload-list>
</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：文件路径，或通过 pathKey 自定义文件路径键值。
• progress：文件上传进度。
• icon：文件图标，或通过 iconKey 自定义图标键值。

完整示例

<template>
	<pure-upload-list
		:list="list"
		@onDelete="handleDelete"
	></pure-upload-list>

	<!-- 选择文件 -->
	<pure-button
		text="选择文件"
		block
		theme="danger"
		@onClick="handleChoose"
	></pure-button>

	<pure-gap></pure-gap>

	<!-- 上传 -->
	<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,
			icon: "/static/images/i_001.png"
		}
	]);

	// 选择文件
	function handleChoose() {
		uni.chooseImage({
			count: 9,
			success: (res) => {
				const files = res.tempFiles;

				// 循环处理文件数据
				files.forEach((item, index) => {
					// 构建列表数据结构
					// 重要提示：不要直接在 item 上操作
					// 因为 item 是个文件对象
					// 在实际测试中发现，如果直接给 item 添加 status、progress 等数据，数据会失去响应性
					// 所以这里要单独构建一个对象，避免直接操作 item
					list.value.push({
						status: "waiting",
						path: item.path,
						progress: 0,
						icon: "/static/images/i_001.png",
						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	按下去的样式类
gap	String	10px	列表项间隔
list	Array	[]	文件列表
pathKey	String	path	文件路径键
nameKey	String		文件名称键
iconKey	String	icon	文件图标键
deleteIconName	String	__close	删除图标名称
uploadingIconName	String		上传中图标名称
failIconName	String	__tips	上传失败图标名称
successIconName	String	__checked	上传成功图标名称
showProgressText	Boolean	true	是否显示上传进度文字
progressOpts	Object	{}	进度条配置 参考

事件

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

插槽

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

样式变量

名称	说明
--pure-upload-list-gap	列表项间隔
--pure-upload-list-item-gap	列表项内容间距
--pure-upload-list-item-background	项目背景
--pure-upload-list-item-padding	项目内边距
--pure-upload-list-item-border-radius	项目圆角
--pure-upload-list-item-icon-font-size	图标字体大小
--pure-upload-list-item-icon-font-weight	图标字体粗细
--pure-upload-list-item-icon-color	图标颜色
--pure-upload-list-item-icon-width	图标宽度
--pure-upload-list-item-icon-height	图标高度
--pure-upload-list-item-body-gap	主内容间距
--pure-upload-list-item-name-font-size	文件名称字体大小
--pure-upload-list-item-name-font-weight	文件名称字体粗细
--pure-upload-list-item-name-color	文件名称颜色
--pure-upload-list-item-name-text-align	文件名称文本对齐
--pure-upload-list-item-progress-gap	进度条内容间距
--pure-upload-list-item-progress-text-font-size	进度条文本字体大小
--pure-upload-list-item-progress-text-font-weight	进度条文本字体粗细
--pure-upload-list-item-progress-text-color	进度条文本颜色
--pure-upload-list-item-status-direction	进度条内容布局方向
--pure-upload-list-item-status-icon-font-size	状态图标字体大小
--pure-upload-list-status-uploading-icon-font-size	上传中图标字体大小
--pure-upload-list-status-uploading-icon-color	上传中图标颜色
--pure-upload-list-status-uploading-icon-margin	上传中图外边距
--pure-upload-list-status-uploading-icon-padding	上传中图标内边距
--pure-upload-list-status-fail-icon-font-size	上传失败图标字体大小
--pure-upload-list-status-fail-icon-color	上传失败图标颜色
--pure-upload-list-status-fail-icon-margin	上传失败图外边距
--pure-upload-list-status-fail-icon-padding	上传失败图标内边距
--pure-upload-list-status-success-icon-font-size	上传成功图标字体大小
--pure-upload-list-status-success-icon-color	上传成功图标颜色
--pure-upload-list-status-success-icon-margin	上传成功图外边距
--pure-upload-list-status-success-icon-padding	上传成功图标内边距
--pure-upload-list-status-delete-icon-font-size	删除图标字体大小
--pure-upload-list-status-delete-icon-color	删除图标颜色
--pure-upload-list-status-delete-icon-margin	删除图外边距
--pure-upload-list-status-delete-icon-padding	删除图标内边距