uView Next
4.1.6

外观

Upload 上传

约 2198 字大约 7 分钟

2025-10-31

该组件用于上传图片、视频和文件场景

单文件上传

  • 最基础的单文件上传用法
<template>
	<un-upload v-model="fileList" uploadText="上传图片" action="https://uview.d3u.cn/upload.php" name="file"></un-upload>
	<text v-if="fileList != ''" style="color: #666;font-size: 14px;">URL：{{ fileList }}</text>
</template>

<script setup lang="uts">
	import { ref } from 'vue'
	const fileList = ref('')
</script>

上传视频

  • 上传视频文件，显示上传进度
<template>
	<un-upload
		v-model="fileListVideo"
		uploadText="上传视频"
		showProgress
		action="https://uview.d3u.cn/upload.php" 
		name="file"
		accept="video"
	></un-upload>
	<text v-if="fileListVideo != ''" style="color: #666;font-size: 14px;">URL：{{ fileListVideo }}</text>
</template>

<script setup lang="uts">
	import { ref } from 'vue'
	const fileListVideo = ref('')
</script>

上传文件

  • 上传任意类型文件，显示上传进度
<template>
	<un-upload
		v-model="fileListFile"
		uploadText="上传文件"
		showProgress
		action="https://uview.d3u.cn/upload.php" 
		name="file"
		accept="file"
	></un-upload>
	<text v-if="fileListFile != ''" style="color: #666;font-size: 14px;">URL：{{ fileListFile }}</text>
</template>

<script setup lang="uts">
	import { ref } from 'vue'
	const fileListFile = ref('')
</script>

多文件上传

  • 支持同时上传多个文件
<template>
	<un-upload
		v-model="fileListArr"
		:maxCount="3"
		multiple
		action="https://uview.d3u.cn/upload.php"
		name="file"
	></un-upload>
	<text v-if="fileListArr.length > 0" style="color: #666;font-size: 14px;">URL：{{ fileListArr }}</text>
</template>

<script setup lang="uts">
	import { ref } from 'vue'
	const fileListArr = ref<string[]>([
		'https://uview.d3u.cn/web/static/uview/album/3.jpg'
	])
</script>

自定义函数上传

  • 使用自定义函数处理上传逻辑
<template>
	<un-upload
		:fileList="fileListFun"
		@afterRead="afterRead"
		@delete="deletePic"
		multiple
	></un-upload>

	<view class="fileList" v-if="fileListFun.length > 0">
		<text>文件列表</text>
		<text v-for="(item,index) in fileListFun" :key="index">
			{{ item.url }}
		</text>
	</view>
</template>

<script setup lang="uts">
	import { ref } from 'vue'
	import type { UnUploadFile ,UnUploadAfterReadEvent,UnUploadDeleteEvent} from '@/uni_modules/uview-unix'
		
	type UploadData = {
		url: string;
		path: string;
		extension: string;
		size: string;
		type: string;
	}

	type UploadRes = {
		success: boolean;
		message: string;
		data: UploadData;
	}

	const fileListFun = ref<UnUploadFile[]>([])

	const deletePic = (event: UnUploadDeleteEvent) => {
		fileListFun.value.splice(event.index, 1)
	}

	const uploadFilePromise = (url: string): Promise<string> => {
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url: 'https://uview.d3u.cn/upload.php', 
				filePath: url,
				name: 'file',
				success: (res) => {
					let data = JSON.parse<UploadRes>(res.data)
					let data1 = data?.data
					resolve(data1?.url!)
				}
			});
		})
	}
	
	const afterRead = async (event: UnUploadAfterReadEvent) => {
		let lists = event.file as UnUploadFile[]
		let fileListLen = fileListFun.value.length

		lists.map((item) => {
			fileListFun.value.push({
				type: item.type,
				url: item.url,
				name: item.name,
				status: 'uploading',
				message: '上传中'
			} as UnUploadFile)
		})

		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url)
			
			fileListFun.value[fileListLen].status = 'success'
			fileListFun.value[fileListLen].message = '上传成功'
			fileListFun.value[fileListLen].url = result

			fileListLen++
		}
	}
</script>

<style scoped>
.fileList{
	margin-top: 10px;
}
</style>

上传状态

  • 展示不同上传状态的文件
<template>
	<un-upload v-model="fileListArr" :fileList="fileListStatus" multiple :maxCount="10"></un-upload>
</template>

<script setup lang="uts">
	import { ref } from 'vue'
	import type { UnUploadFile } from '@/uni_modules/uview-unix'

	const fileListArr = ref<string[]>([
		'https://uview.d3u.cn/web/static/uview/album/3.jpg'
	])

	const fileListStatus = ref<UnUploadFile[]>([
		{
			type:'image',
			url: 'https://uview.d3u.cn/web/static/uview/album/1.jpg',
			status: 'uploading',
			message: '上传中'
		},
		{
			type:'image',
			url: 'https://uview.d3u.cn/web/static/uview/album/1.jpg',
			status: 'uploading',
			progress: 46
		},
		{
			type:'image',
			url: 'https://uview.d3u.cn/web/static/uview/album/2.jpg',
			status: 'reload',
			message: '重新上传'
		},
		{
			type:'image',
			url: 'https://uview.d3u.cn/web/static/uview/album/3.jpg',
			status: 'error',
			message: '上传失败'
		},
		{
			type:'image',
			url: 'https://uview.d3u.cn/web/static/uview/album/4.jpg',
			status: 'success',
			message: '上传成功'
		},
	])
</script>

按钮样式

  • 自定义上传按钮样式
<template>
	<un-upload 
		v-model="fileListButton"
		action="https://uview.d3u.cn/upload.php"
		name="file" 
		multiple 
		:maxCount="10"
	>
		<template #file="{ file, index}">
			<view style="width: 100%;">
				<text>{{ file.url }}</text>
			</view>
		</template>
		<un-button icon="cloud-upload" type="primary" text="上传文件"></un-button>
	</un-upload>
</template>

<script setup lang="uts">
	import { ref } from 'vue'
	const fileListButton = ref('')
</script>

自定义上传样式

  • 完全自定义上传区域样式
<template>
	<un-upload
		v-model="fileListCustom"
		action="https://uview.d3u.cn/upload.php"
		name="file"
		:multiple="false"
	>
		<template #file="{ file, index}">
			<image :src="file.url" mode="widthFix" style="width: 250px;height: 150px;"></image>
		</template>
		<image src="http://uview.d3u.cn/web/static/uview/demo/upload/positive.png" mode="widthFix" style="width: 250px;height: 150px;"></image>
	</un-upload>
</template>

<script setup lang="uts">
	import { ref } from 'vue'
	const fileListCustom = ref('')
</script>

API

Props

参数说明类型默认值
v-model已上传的文件列表Array | String[]
action上传请求的 URLString''
data上传时附带的额外参数object{}
headers设置上传的请求头部object{}
accept接受的文件类型
Enum
image
capture图片或视频拾取模式，当 accept 为 image 类型时，设置 capture 为 camera 可以直接调起摄像头Array<String>['album', 'camera']
extension根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。例如['.zip','.exe','.js']，不支持 application/msword 等类似值Array[]
compressed是否开启图片/视频压缩功能，默认开启Booleantrue
compressImage当 accept 为 image 时生效，图片压缩参数（即将废弃）Object-
compressOptions图片压缩参数，参考uni.chooseImageObject{}
camera当 accept 为 video 时生效，可选值为 back 或 frontStringback
maxDuration当 accept 为 video 时生效，拍摄视频最长拍摄时间，单位秒Number60
uploadIcon上传区域的图标，只能内置图标Stringcamera-fill
uploadIconColor上传区域的图标的颜色String#c0c4cc
useBeforeRead是否开启文件读取前事件Booleanfalse
previewFullImage是否显示组件自带的图片预览功能Booleantrue
maxCount最大选择图片的数量Number52
disabled是否禁用上传Booleanfalse
imageMode预览上传的图片时的裁剪模式，和 image 组件 mode 属性一致StringaspectFill
name标识符，可以在回调函数的第二项参数中获取Stringfile
sizeTypeoriginal 原图，compressed 压缩图，默认二者都有，H5 无效Array<String>['original', 'compressed']
multiple是否开启图片多选，部分安卓机型不支持Booleanfalse
deletable是否显示删除图片的按钮Booleantrue
maxSize选择单个文件的最大大小，单位 B(byte)，默认不限制NumberNumber.MAX_VALUE
fileList显示已上传的文件列表Array<UnUploadFile>[]
uploadText上传区域的提示文字String''
width内部预览图片区域和选择图片按钮的区域宽度，单位 rpx，不能是百分比，或者autoString | Number''
height内部预览图片区域和选择图片按钮的区域高度，单位 rpx，不能是百分比，或者autoString | Number''
previewImage是否在上传完成后展示预览图Booleantrue
round设置圆角值String | Number''
showProgress是否展示上传进度Booleanfalse
gutter 4.1.0预览图之间的间距String | Number8
customStyle 4.1.0自定义样式Object | String''

注意

在H5端，由于图片压缩采用canvas实现，压缩后使用 URL.createObjectURL 方法转换为 tempFilePath，若直接使用 filePath 参数进行上传，会导致后端无法正常获取上传文件的原始名称，因此建议使用 file 属性进行上传。

uni.uploadFile({
	url:'',
	// #ifdef H5
	file:file,
	// #endif
	// #ifndef H5
	filePath: tempFilePath,
	// #endif
});

Slot

slot 中您可以内置任何您所需要的样式。

名称说明类型
default自定义上传样式-
file自定义已上传文件的展示样式{ file: UnUploadFile, index: number }

Events

回调参数中的event参数，为当前删除元素的所有信息，index为当前操作的图片的索引，name为删除名称，file包含删除的 url 信息

事件名说明类型
afterRead读取后的处理函数
Function
beforeRead读取前的处理函数
Function
oversize图片大小超出最大允许大小
Function
clickPreview全屏预览图片时触发
Function
delete删除图片
Function
error选择文件出错时触发
Function

Scss 变量

变量名默认值说明
$un-upload-preview-size80px预览图片尺寸
$un-upload-preview-margin0 8px 8px 0预览图片外边距
$un-upload-preview-border-radius$radius-base预览图片圆角
$un-upload-other-bg-colorrgb(242, 242, 242)其他文件类型背景色
$un-upload-other-text-font-size11px其他文件类型文字大小
$un-upload-other-text-color$text-color-muted其他文件类型文字颜色
$un-upload-other-text-margin-top2px其他文件类型文字上边距
$un-upload-deletable-size18px删除按钮尺寸
$un-upload-deletable-margin4px删除按钮外边距
$un-upload-deletable-bg-colorrgb(0, 0, 0, 0.5)删除按钮背景色
$un-upload-deletable-z-index3删除按钮层级
$un-upload-status-bg-color$bg-color-overlay上传状态背景色
$un-upload-status-message-font-size$text-sm上传状态消息字体大小
$un-upload-status-message-color$text-color-inverted上传状态消息颜色
$un-upload-status-message-margin-top5px上传状态消息上边距
$un-upload-button-size80px上传按钮尺寸
$un-upload-button-bg-color$bg-color-light上传按钮背景色
$un-upload-button-border-radius$radius-base上传按钮圆角
$un-upload-button-margin0 8px 8px 0上传按钮外边距
$un-upload-button-text-font-size$text-xs上传按钮文本字体大小
$un-upload-button-text-color$text-color-muted上传按钮文本颜色
$un-upload-button-text-margin-top2px上传按钮文本上边距
$un-upload-button-hover-bg-color$bg-color-hover上传按钮悬停背景色
$un-upload-button-disabled-opacity.5上传按钮禁用透明度

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档

数据类型

/**
 * 上传文件类型定义
 */
export type UnUploadFile = {
	type: 'image' | 'video' | 'file';
	url: string;
	mime?: string;
	size?: number;
	name?: string;
	thumb?: string;
	status?: 'uploading' | 'success' | 'error' | 'reload'
	message?: string;
	deletable?: boolean;
	file?: any;  // h5 上传文件对象
}

/**
 * 预览事件类型
 */
export type UnUploadPreviewEvent = {
	name: string;
	index: number;
	file: string;
}

/**
 * 删除事件类型
 */
export type UnUploadDeleteEvent = {
	name: string;
	index: number;
	file: string;
}

/**
 * 文件大小超限事件类型
 */
export type UnUploadOversizeEvent = {
	name: string;
	index: number;
	file: string;
	size: number;
	maxSize: number;
}

/**
 * 读取后事件类型
 */
export type UnUploadAfterReadEvent = {
	file: UnUploadFile[];
	index: number;
	name: string;
}

/**
 * 读取前事件类型
 */
export type UnUploadBeforeReadEvent = {
	file: UnUploadFile[];
	index: number;
	name: string;
	callback?: (ok: boolean) => void;
}

Copyright © 2026 uView Next