@ecolovo/uniapp-components 1.0.0

package/components/uploader/files.js

@@ -0,0 +1,225 @@
+export function randomInt(max = 100, min = 0, padStart = false) {
+	const v = Math.floor(Math.random() * max + min);
+	if (!padStart) return v;
+	const n = (max - 1).toString().length;
+	return v.toString().padStart(n, '0');
+}
+
+const FILE_TYPE_IMAGE = 'image';
+const FILE_TYPE_VIDEO = 'video';
+const FILE_TYPE_FILE = 'file';
+
+/**
+ * 文件
+ * @typedef {object} ChosenFile
+ * @property {string} name 文件名
+ * @property {number} size 文件大小
+ * @property {string} path 路径
+ * @property {string} type 类型
+ */
+
+/**
+ * 文件类型字符串是否有效
+ * @param {string} type 文件类型字符串 'image' 、 'video' 、 'file' 的组合或 'all'
+ * @returns {boolean} 是否有效
+ */
+function typeStringValidator(type) {
+	if (type === 'all') return true;
+	const arr = typeStringToArr(type);
+	if (arr.length === 0) return false;
+	return arr.every((item) => [FILE_TYPE_IMAGE, FILE_TYPE_VIDEO, FILE_TYPE_FILE].includes(item));
+}
+
+/**
+ * 将文件类型字符串转换为文件类型数组
+ * @param {string} type 文件类型字符串 'image' 、 'video' 、 'file' 的组合或 'all'
+ * @param {string} divider 分隔符
+ * @returns {string[]} 文件类型数组
+ */
+function typeStringToArr(type, divider = ',') {
+	if (Array.isArray(type)) return type;
+	if (type === 'all') return [FILE_TYPE_IMAGE, FILE_TYPE_VIDEO, FILE_TYPE_FILE];
+	return [...new Set(type.split(divider))];
+}
+
+/**
+ * 将文件类型数组转换为 {@link uni.chooseMessageFile} 的 `type` 参数
+ * @param {('image' | 'video' | 'file')[]} arr 文件类型，可选 'image' 、 'video' 、 'file' 组成的数组
+ * @returns {'image' | 'video' | 'file' | 'all'}
+ */
+function typeArrToChooseMessageFileType(arr) {
+	if (!arr || !Array.isArray(arr)) throw 'arr is invalid';
+
+	const image = arr.includes(FILE_TYPE_IMAGE);
+	const video = arr.includes(FILE_TYPE_VIDEO);
+	const file = arr.includes(FILE_TYPE_FILE);
+	if (image && video && file) return 'all';
+
+	if (file) return FILE_TYPE_FILE;
+	if (image) return FILE_TYPE_IMAGE;
+	if (video) return FILE_TYPE_VIDEO;
+	throw 'arr is invalid';
+}
+
+/**
+ * 将文件类型数组转换为 {@link uni.chooseMessageFile} 的 `type` 参数
+ * @param {('image' | 'video' | 'file')[] | undefined} arr 文件类型，可选 'image' 、 'video' 组成的数组
+ * @returns {('image' | 'video')[]}
+ */
+function typeArrToChooseMediaType(arr) {
+	if (!arr || !Array.isArray(arr)) throw 'arr is invalid';
+
+	const image = arr.includes(FILE_TYPE_IMAGE);
+	const video = arr.includes(FILE_TYPE_VIDEO);
+	if (image && video) return [FILE_TYPE_IMAGE, FILE_TYPE_VIDEO];
+
+	if (image) return [FILE_TYPE_IMAGE];
+	if (video) return [FILE_TYPE_VIDEO];
+	throw 'arr is invalid';
+}
+
+function getFileExt(filename) {
+	return filename.split('.').pop();
+}
+
+function isImage(filename) {
+	return ['jpg', 'jpeg', 'png'].includes(getFileExt(filename));
+}
+
+function isVideo(filename) {
+	return ['mp4', 'mov', 'mkv', 'wmv', 'avi', 'flv'].includes(getFileExt(filename));
+}
+
+/**
+ * @typedef {object} chooseFileResult
+ * @property {ChosenFile[]} files 有效的文件列表
+ * @property {ChosenFile[]} invalidFiles 无效的文件列表
+ */
+/**
+ * 过滤文件
+ * @param {ChosenFile[]} files 选择的文件列表
+ * @param {ChosenFile[]} extensionList 限制的文件类型
+ * @param {string} key 读取文件名的 key
+ * @returns {chooseFileResult} 过滤后的结果
+ */
+function filterFiles(files, extensionList, key = 'name') {
+	const invalidFiles = [];
+	if (extensionList && extensionList.length > 0) {
+		files = files.filter((item) => {
+			const ext = getFileExt(item[key]);
+			if (extensionList.includes(ext)) {
+				return item;
+			}
+			invalidFiles.push(item);
+		});
+	}
+	return { files, invalidFiles };
+}
+
+/**
+ * @typedef {object} chooseFileParams
+ * @property {number} max 最大上传数量，不能超过 9
+ * @property {('image' | 'video' | 'file')[] | undefined} type 文件类型，可选 'image' 、 'video' 、 'file' 组成的数组
+ * @property {string[]} selectExtension 选择文件时限制文件类型，不带 "."，仅 type 包含 file 时有效
+ * @property {string[]} allowedExtension 选中文件后文件类型限制，不带 "."
+ * @property {boolean} fromChat 是否从聊天文件中选择图片和视频
+ */
+/** 选择文件
+ * @param {chooseFileParams} param0
+ * @return {Promise<chooseFileResult>} 选择的文件列表
+ */
+function chooseFile({ max = 1, type, selectExtension, allowedExtension, fromChat = false } = {}) {
+	/* #ifdef MP-WEIXIN */
+
+	if (type.includes(FILE_TYPE_FILE) || fromChat) {
+		type = typeArrToChooseMessageFileType(type);
+
+		return new Promise((resolve, reject) => {
+			uni.chooseMessageFile({
+				count: Math.max(1, Math.min(max, 100)),
+				type: type,
+				extension: selectExtension,
+				success(res) {
+					resolve(filterFiles(res.tempFiles, allowedExtension));
+				},
+				fail(err) {
+					reject(err);
+				},
+			});
+		});
+	}
+	/* #endif */
+	type = typeArrToChooseMediaType(type);
+
+	return new Promise((resolve, reject) => {
+		uni.chooseMedia({
+			count: Math.max(1, Math.min(max, 20)),
+			mediaType: type,
+			sizeType: ['original', 'compressed'],
+			sourceType: ['album', 'camera'],
+			success(res) {
+				resolve(
+					filterFiles(
+						res.tempFiles.map((item) => ({
+							name:
+								(item.fileType === FILE_TYPE_IMAGE ? '图片' : '视频') +
+								'_' +
+								Date.now() +
+								randomInt(10000, 0, true) +
+								'.' +
+								getFileExt(item.tempFilePath),
+							size: item.size,
+							path: item.tempFilePath,
+							type: item.fileType,
+						})),
+						allowedExtension
+					)
+				);
+			},
+			fail(err) {
+				reject(err);
+			},
+		});
+	});
+}
+
+/**
+ * 保存文件
+ * @param {string} path 文件临时路径
+ * @returns 保存后的路径
+ */
+function saveFile(path, name) {
+	return new Promise((resolve, reject) => {
+		/* #ifdef MP-WEIXIN */
+		uni.getFileSystemManager().saveFile({
+			tempFilePath: path,
+			filePath: `${wx.env.USER_DATA_PATH}/${name}`,
+			success: function (res) {
+				resolve(res.savedFilePath);
+			},
+			fail: reject,
+		});
+		/* #endif */
+		/* #ifndef MP-WEIXIN */
+		uni.saveFile({
+			tempFilePath: path,
+			success: function (res) {
+				resolve(res.savedFilePath);
+			},
+			fail: reject,
+		});
+		/* #endif */
+	});
+}
+
+export {
+	FILE_TYPE_IMAGE,
+	FILE_TYPE_VIDEO,
+	FILE_TYPE_FILE,
+	typeStringToArr,
+	typeStringValidator,
+	chooseFile,
+	isImage,
+	isVideo,
+	saveFile,
+};

package/components/uploader/media-uploader.vue

@@ -0,0 +1,133 @@
+<template>
+	<view :class="componentClassNames" :style="{ '--columns': columns }">
+		<!-- 已上传文件列表 -->
+		<aspect-cpn v-for="(item, idx) in assetsList" :key="idx" :class="$style['Uploader--item']" :style="styleWidth">
+			<!-- TODO: 视频文件支持 -->
+			<!-- <video
+				v-if="item.fileType === 'video'"
+				:muted="true"
+				:src="item.fileUrl"
+				:controls="false"
+				:show-progress="false"
+				:show-fullscreen-btn="false"
+				:show-play-btn="false"
+				:show-center-play-btn="false"
+				:show-loading="false"
+				:enable-progress-gesture="false"
+				object-fit="fill"
+				:class="[$style['Uploader--image'], $style['Uploader--video']]"
+			></video> -->
+			<image-cpn
+				:src="item.tempFilePath || item.url"
+				:preview-list="previewList"
+				:class="$style['Uploader--image']"
+				:style="styleSize"
+				mode="aspectFill"
+			/>
+			<view
+				v-if="item.uploadStatus !== 'uploading'"
+				:class="$style['Uploader--icon-delete']"
+				@click.stop="deleteFile(idx)"
+			>
+			</view>
+		</aspect-cpn>
+		<!-- 上传按钮 -->
+		<aspect-cpn :class="$style['Uploader--item']" :style="styleWidth">
+			<button-cpn plain :class="$style['Uploader--button']" @click="selectFile">
+				<view style="line-height: 1.3em">
+					<view>上传</view>
+					<view>图片</view>
+				</view>
+			</button-cpn>
+		</aspect-cpn>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import AspectCpn from '../aspect/aspect.vue';
+import ButtonCpn from '../button/button.vue';
+import ImageCpn from '../image/image.vue';
+import UploadMixin from './mixin';
+
+export default {
+	name: 'AppUploader',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { AspectCpn, ButtonCpn, ImageCpn },
+	mixins: [componentName, UploadMixin],
+	props: {
+		/** 显示宽度 */
+		columns: {
+			type: [String, Number],
+			default: 4,
+		},
+		/** 显示宽度 */
+		width: {
+			type: [String, Number],
+			default: '',
+		},
+	},
+	computed: {
+		styleWidth() {
+			if (!this.width) return '';
+			const width = typeof this.width === 'number' ? `${this.width}rpx` : this.width;
+			return `width: ${width};`;
+		},
+		/** 预览列表 */
+		previewList() {
+			return this.assetsList.map((item) => item.tempFilePath || item.url);
+		},
+	},
+	methods: {
+		selectFile() {
+			uni.chooseMedia({
+				count: this.restCount,
+				mediaType: ['image', 'video'],
+				sourceType: ['album', 'camera'],
+				success: (res) => {
+					this.validateFiles(res.tempFiles);
+				},
+			});
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.Uploader {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12rpx;
+}
+
+.Uploader--item {
+	width: calc(100% / var(--columns) - 12rpx * (var(--columns) - 1) / var(--columns));
+}
+.Uploader--image {
+	border-radius: 16rpx;
+}
+.Uploader--button {
+	height: 100%;
+	border-color: #ccc;
+	border-radius: 16rpx;
+}
+
+.Uploader--icon-delete {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 1;
+	transform-origin: 75%, 25%;
+	width: 36rpx;
+	height: 36rpx;
+	background: no-repeat top / 100% 45% linear-gradient(90deg, red 45%, transparent 45%, transparent 55%, red 55%),
+		no-repeat bottom / 100% 45% linear-gradient(90deg, red 45%, transparent 45%, transparent 55%, red 55%),
+		radial-gradient(transparent 50%, red 50%, red 100%);
+	transform: translate(25%, -25%) rotate(45deg);
+	border-radius: 50%;
+}
+</style>

package/components/uploader/mixin.js

@@ -0,0 +1,106 @@
+export default {
+	props: {
+		/** 文件列表 */
+		value: {
+			type: Array,
+			default: () => [],
+		},
+		max: {
+			type: Number,
+			default: 9,
+		},
+		maxSize: {
+			type: Number,
+			default: 1024 * 1024 * 10, // 10MB
+		},
+		uploadHandler: {
+			type: Function,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			innerValue: [],
+		};
+	},
+	computed: {
+		currentValue: {
+			get: function () {
+				return this.value === null ? this.innerValue : this.value;
+			},
+			set: function (value) {
+				this.$emit('input', value);
+				this.innerValue = value;
+				this.$emit('change', value);
+			},
+		},
+		restCount() {
+			if (this.max <= 0) return 9;
+			return this.max - this.currentValue.length;
+		},
+		assetsList() {
+			return this.currentValue.map((item) =>
+				typeof item === 'string' ? { url: item, uploadStatus: 'success' } : { uploadStatus: 'success', ...item }
+			);
+		},
+	},
+	methods: {
+		/** 校验待上传文件 */
+		async validateFiles(files) {
+			if (files.length === 0) return;
+
+			// 过滤大文件
+			const validFiles = files.filter((file) => file.size <= this.maxSize);
+			if (validFiles.length < files.length) {
+				uni.showToast({ icon: 'none', title: '已过滤超出大小限制的文件', duration: 2000 });
+			}
+			if (validFiles.length === 0) return;
+
+			// 校验数量
+			if (validFiles.length > this.restCount) {
+				uni.showToast({ icon: 'none', title: `最多只能上传${this.max}个文件`, duration: 2000 });
+			}
+			this.currentValue = this.currentValue.concat(
+				validFiles.slice(0, this.restCount).map((file) => ({ ...file, uploadStatus: 'ready' }))
+			);
+		},
+		/** 上传文件 */
+		upload(files) {
+			files.map(async (file) => {
+				try {
+					const res = await this.uploadHandler(file);
+					const index = this.currentValue.findIndex((item) => item.tempFilePath === file.tempFilePath);
+					if (index < 0) {
+						return;
+					}
+					const currentValue = [...this.currentValue];
+					currentValue.splice(index, 1, {
+						fileId: res.fileId,
+						fileName: res.fileName,
+						filePreviewUrl: res.filePreviewUrl,
+						fileUrl: res.fileUrl,
+						fileType: file.type,
+					});
+					this.currentValue = currentValue;
+					return this.currentValue[index];
+				} catch {
+					const index = this.currentValue.findIndex((item) => item.tempFilePath === file.tempFilePath);
+					if (index < 0) {
+						return;
+					}
+					const currentValue = [...this.currentValue];
+					currentValue.splice(index, 1, { ...file, uploadStatus: 'error' });
+					this.currentValue = currentValue;
+				}
+			});
+		},
+		/** 删除文件 */
+		deleteFile(index) {
+			if (index >= 0 && index < this.currentValue.length) {
+				const currentValue = [...this.currentValue];
+				currentValue.splice(index, 1);
+				this.currentValue = currentValue;
+			}
+		},
+	},
+};

package/components/uploader/uni.js

@@ -0,0 +1,38 @@
+import { download } from './download';
+
+function canOpenDocument(filename) {
+	return ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'].includes(filename.split('.').pop());
+}
+
+/**
+ * 新开页面打开文档，支持格式：doc, docx, xls, xlsx, ppt, pptx, pdf
+ * @param {string} url 文件 url
+ * @param {string} name 文件名
+ */
+export function openDocument(url, name) {
+	return download(url, name)
+		.catch(() => {
+			return Promise.reject('文件下载失败');
+		})
+		.then((res) => {
+			var path = res.filePath;
+			if (!canOpenDocument(path)) {
+				return Promise.reject('该文件类型不支持预览');
+			}
+			return new Promise((resolve, reject) => {
+				uni.openDocument({
+					filePath: path,
+					showMenu: true,
+					success: resolve,
+					fail: reject,
+				});
+			});
+		});
+}
+
+/** 复制文本 */
+export function copy(text) {
+	uni.setClipboardData({
+		data: text,
+	});
+}

package/components/uploader/upload-button.vue

@@ -0,0 +1,29 @@
+<template>
+	<button-cpn plain :class="$style['Uploader--card-uploader']" @click="$emit('select')">
+		<slot>上传</slot>
+	</button-cpn>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import ButtonCpn from '../button/button.vue';
+
+export default {
+	name: 'AppUploadButton',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { ButtonCpn },
+	mixins: [componentName],
+	props: {
+		/** 文件列表 */
+		value: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	computed: {},
+	methods: {},
+};
+</script>