Upload 文件上传

提供便捷的文件上传功能，支持上传进度监听和任务控制管理。该模块封装了 uni-appx 的文件上传能力，提供更简洁的 API 接口。如需可视化上传组件，请使用 cl-upload 组件。

API 方法

方法名	参数	返回值	说明
upload	path: string	Promise<string>	通过文件路径上传，返回文件 URL
uploadFile	file: ChooseImageTempFile, options?: UploadOptions	Promise<string>	通过文件对象上传，返回文件 URL

类型定义

// 上传文件对象（uni-appx 选择文件返回的格式）
interface ChooseImageTempFile {
	path: string; // 文件本地临时路径
	size: number; // 文件大小（字节）
	name: string; // 文件名称
	type: string; // 文件类型（MIME 类型）
}

// 上传进度信息
interface OnProgressUpdateResult {
	progress: number; // 上传进度百分比 (0-100)
	totalBytesSent: number; // 已发送字节数
	totalBytesExpectedToSend: number; // 预期发送总字节数
}

// 上传任务控制器
interface UploadTask {
	abort(): void; // 中止上传任务
}

// 上传配置选项
interface UploadOptions {
	onProgressUpdate?: (result: OnProgressUpdateResult) => void; // 上传进度监听回调
	onTask?: (task: UploadTask) => void; // 获取上传任务实例，用于控制上传
}

使用示例

基础路径上传

最简单的上传方式，直接传入文件路径：

import { upload } from "@/.cool";

function handleUpload() {
	uni.chooseImage({
		count: 1,
		success(res) {
			// 开始上传文件
			upload(res.tempFilePaths[0])
				.then((url) => {
					console.log("上传成功，文件地址：", url);
					// 处理上传成功后的逻辑
				})
				.catch((error) => {
					console.error("上传失败：", error);
					// 处理上传失败的情况
				});
		},
		fail(error) {
			console.error("选择文件失败：", error);
		}
	});
}

单个文件上传

单个文件上传示例，支持监听上传进度和中止上传任务:

import { uploadFile } from "@/.cool";

function handleAdvancedUpload() {
	uni.chooseImage({
		count: 1, // 最多选择1个文件
		success(res) {
			// 单个文件上传
			uploadFile(tempFiles[0], {
				onProgressUpdate: ({ progress }) => {
					console.log(`上传进度：${progress}%`);
				}
			})
				.then((url) => {
					console.log("单个文件上传成功：", url);
				})
				.catch((error) => {
					console.error("单个文件上传失败：", error);
				});
		},
		fail(error) {
			console.error("选择文件失败：", error);
		}
	});
}

多个文件上传

通过遍历 tempFiles 数组，对每个文件调用 uploadFile 方法实现批量上传，支持进度监听和错误处理。

import { uploadFile } from "@/.cool";

function handleAdvancedUpload() {
	uni.chooseImage({
		count: 9, // 最多选择9个文件
		success(res) {
			if (Array.isArray(res.tempFiles)) {
				// 批量上传多个文件
				res.tempFiles.forEach((file, index) => {
					uploadFile(file, {
						// 监听上传进度
						onProgressUpdate: ({
							progress,
							totalBytesSent,
							totalBytesExpectedToSend
						}) => {
							console.log(`文件${index + 1}上传进度：${progress}%`);
							console.log(
								`已上传：${totalBytesSent} / 总大小：${totalBytesExpectedToSend}`
							);
						}
					})
						.then((url) => {
							console.log(`文件${index + 1}上传成功：`, url);
						})
						.catch((error) => {
							console.error(`文件${index + 1}上传失败：`, error);
						});
				});
			}
		},
		fail(error) {
			console.error("选择文件失败：", error);
		}
	});
}