uview-ultra 4.5.46

package/components/up-upload/up-upload.uvue

@@ -0,0 +1,1131 @@
+<template>
+	<view class="up-upload" :style="rootStyle">
+		<view class="up-upload__wrap" >
+			<template v-if="previewImage">
+				<view
+				    class="up-upload__wrap__preview"
+				    v-for="(item, index) in lists"
+				    :key="index"
+				>
+					<image
+					    v-if="item.isImage || (item.type != null && item.type === 'image')"
+					    :src="item.thumb != null ? item.thumb : item.url"
+					    :mode="imageMode"
+					    class="up-upload__wrap__preview__image"
+					    @tap="onClickPreview(item, index)"
+						:style="previewStyle"
+					/>
+					<view class="up-upload__wrap__preview__video"
+						:style="previewStyle"
+						v-else-if="(item.isVideo || (item.type != null && item.type === 'video')) && getVideoThumb">
+						<image
+							v-if="item.thumb"
+						    :src="item.thumb"
+						    :mode="imageMode"
+						    class="up-upload__wrap__preview__image"
+						    @tap="onClickPreview(item, index)"
+							:style="previewStyle"
+						/>
+						<up-icon
+							v-else
+						    color="#80CBF9"
+						    size="26"
+						    :name="item.isVideo || (item.type != null && item.type === 'video') ? 'movie' : 'file-text'"
+						></up-icon>
+						<view v-if="item.status === 'success'"
+							class="up-upload__wrap__play"
+							@tap="onClickPreview(item, index)">
+							<slot name="playIcon"></slot>
+							<up-icon v-if="$slots['playIcon'] == null"
+								class="up-upload__wrap__play__icon"
+								name="play-right" size="22px"></up-icon>
+						</view>
+					</view>
+					<view
+					    v-else
+					    class="up-upload__wrap__preview__other"
+						@tap="onClickPreview(item, index)"
+						:style="previewStyle"
+					>
+						<up-icon
+						    color="#80CBF9"
+						    size="26"
+						    :name="item.isVideo || (item.type != null && item.type === 'video') ? 'movie' : 'folder'"
+						></up-icon>
+						<text class="up-upload__wrap__preview__other__text">
+							{{ getPreviewOtherText(item) }}
+						</text>
+					</view>
+					<view
+					    class="up-upload__status"
+					    v-if="item.status === 'uploading' || item.status === 'failed'"
+					>
+						<view class="up-upload__status__icon">
+							<up-icon
+							    v-if="item.status === 'failed'"
+							    name="close-circle"
+							    color="#ffffff"
+							    size="25"
+							/>
+							<up-loading-icon
+							    size="22"
+							    mode="circle"
+							    v-else
+							/>
+						</view>
+						<text
+						    v-if="item.message"
+						    class="up-upload__status__message"
+						>{{ item.message }}</text>
+						<up-gap class="up-upload__progress" height="3px"
+							:style="getProgressStyle(item)"></up-gap>
+					</view>
+					<view
+					    class="up-upload__deletable"
+					    v-if="item.status !== 'uploading' && (deletable || item.deletable)"
+					    @tap.stop="deleteItem(index)"
+					>
+						<view class="up-upload__deletable__icon">
+							<up-icon
+							    name="close"
+							    color="#ffffff"
+							    size="10"
+							></up-icon>
+						</view>
+					</view>
+					<slot name="success">
+						<view
+							class="up-upload__success"
+							v-if="item.status === 'success'"
+						>
+							<!-- #ifdef APP-NVUE -->
+							<image
+								:src="successIcon"
+								class="up-upload__success__icon"
+							></image>
+							<!-- #endif -->
+							<!-- #ifndef APP-NVUE -->
+							<view class="up-upload__success__icon">
+								<up-icon
+									name="checkmark"
+									color="#ffffff"
+									size="12"
+								></up-icon>
+							</view>
+							<!-- #endif -->
+						</view>
+					</slot>
+				</view>
+			</template>
+			<template v-if="isInCount">
+				<view
+				    v-if="$slots['trigger'] != null"
+				    @tap="chooseFile()"
+				>
+					<slot name="trigger" />
+				</view>
+				<view
+				    v-else-if="$slots['trigger'] == null && ($slots['default'] != null || $slots['$default'] != null)"
+				    @tap="chooseFile()"
+				>
+					<slot />
+				</view>
+				<view
+				    v-else
+				    class="up-upload__button"
+				    :hover-class="!disabled ? 'up-upload__button--hover' : ''"
+				    hover-stay-time="150"
+				    @tap="chooseFile()"
+				    :class="[disabled ? 'up-upload__button--disabled' : '']"
+					:style="previewStyle"
+				>
+					<up-icon
+					    :name="uploadIcon"
+					    size="26"
+					    :color="uploadIconColor"
+					></up-icon>
+					<text
+					    v-if="uploadText"
+					    class="up-upload__button__text"
+					>{{ uploadText }}</text>
+				</view>
+			</template>
+		</view>
+		<canvas id="myCanvas" type="2d"
+			style="width: 100px; height: 150px;display: none;"></canvas>
+		<up-popup
+			mode="center"
+			v-model:show="popupShow">
+			<video id="myVideo" v-if="popupShow"
+				:src="currentItemIndex >= 0 ? lists[currentItemIndex].url : ''"
+				@error="videoErrorCallback" show-center-play-btn
+				:object-fit='videoPreviewObjectFit' show-fullscreen-btn='true'
+				enable-play-gesture controls
+				:autoplay="true" auto-pause-if-open-native
+				todoloadedmetadata="loadedVideoMetadata"
+				:initial-time='0.1'>
+			</video>
+		</up-popup>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import type { PropType } from 'vue'
+	import { computed, ref, watch } from 'vue'
+	import {
+		chooseFile as chooseUploadFile
+	} from './utils.uts'
+	import { addStyle as addStyleFn, addUnit as addUnitFn, error, toast } from '../../libs/function/index.uts'
+	import { func as testFunc, promise as testPromise,
+		image as testImage, video as testVideo } from '../../libs/function/test.uts'
+	import { t } from '../../libs/i18n'
+	/**
+	 * upload 上传
+	 * @description 该组件用于上传图片场景
+	 * @tutorial https://uview-plus.jiangruyi.com/components/upload.html
+	 * @property {String}			accept				接受的文件类型, 可选值为all media image file video （默认 'image' ）
+	 * @property {String | Array}	capture				图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头（默认 ['album', 'camera'] ）
+	 * @property {Array}			extension			选择文件的后缀名，暂只支持.zip、.png等，不支持application/msword等值
+	 * @property {Boolean}			compressed			当accept为video时生效，是否压缩视频，默认为true（默认 true ）
+	 * @property {String}			camera				当accept为video时生效，可选值为back或front（默认 'back' ）
+	 * @property {Number}			maxDuration			当accept为video时生效，拍摄视频最长拍摄时间，单位秒（默认 60 ）
+	 * @property {String}			uploadIcon			上传区域的图标，只能内置图标（默认 'camera-fill' ）
+	 * @property {String}			uploadIconColor		上传区域的图标的字体颜色，只能内置图标（默认 #D3D4D6 ）
+	 * @property {Boolean}			useBeforeRead		是否开启文件读取前事件（默认 false ）
+	 * @property {Boolean}			previewFullImage	是否显示组件自带的图片预览功能（默认 true ）
+	 * @property {String | Number}	maxCount			最大上传数量（默认 52 ）
+	 * @property {Boolean}			disabled			是否启用（默认 false ）
+	 * @property {String}			imageMode			预览上传的图片时的裁剪模式，和image组件mode属性一致（默认 'aspectFill' ）
+	 * @property {String}			name				标识符，可以在回调函数的第二项参数中获取
+	 * @property {Array}			sizeType			所选的图片的尺寸, 可选值为original compressed（默认 ['original', 'compressed'] ）
+	 * @property {Boolean}			multiple			是否开启图片多选，部分安卓机型不支持 （默认 false ）
+	 * @property {Boolean}			deletable			是否展示删除按钮（默认 true ）
+	 * @property {String | Number}	maxSize				文件大小限制，单位为byte （默认 Number.MAX_VALUE ）
+	 * @property {Array}			fileList			显示已上传的文件列表
+	 * @property {String}			uploadText			上传区域的提示文字
+	 * @property {String | Number}	width				内部预览图片区域和选择图片按钮的区域宽度（默认 80 ）
+	 * @property {String | Number}	height				内部预览图片区域和选择图片按钮的区域高度（默认 80 ）
+	 * @property {Object}			customStyle			组件的样式，对象形式
+	 * @event {Function} afterRead		读取后的处理函数
+	 * @event {Function} beforeRead		读取前的处理函数
+	 * @event {Function} oversize		文件超出大小限制
+	 * @event {Function} clickPreview	点击预览图片
+	 * @event {Function} delete 		删除图片
+	 * @example <up-upload :action="action" :fileList="fileList" ></up-upload>
+	 */
+	import { UPUploadListItem, UPUploadFileChoosed, UPUploadChooseFileOptions } from './types.uts'
+	type UPUploadReadCallback = (file: Array<UPUploadFileChoosed | null>, detail: UTSJSONObject) => any
+	function createStringList(values: Array<string> = [] as Array<string>): Array<string> {
+		return values
+	}
+	function createCaptureList(): Array<string> {
+		return ['album', 'camera'] as Array<string>
+	}
+	function createFileList(): Array<UTSJSONObject> {
+		return [] as Array<UTSJSONObject>
+	}
+	function createObject(): UTSJSONObject {
+		return {} as UTSJSONObject
+	}
+	function numericValue(value: any | null, fallback: number): number {
+		if (typeof value === 'number') {
+			return value
+		}
+		if (value == null) {
+			return fallback
+		}
+		const parsed = parseFloat(value.toString())
+		return isNaN(parsed) ? fallback : parsed
+	}
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: 'up-upload'
+		// #ifdef MP-WEIXIN
+		,
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+	const props = defineProps({
+		accept: {
+			type: String,
+			default: 'image'
+		},
+		extension: {
+			type: Array as PropType<Array<string>>,
+			default(): Array<string> {
+				return [] as Array<string>
+			}
+		},
+		capture: {
+			type: [Array, String],
+			default(): Array<string> {
+				return ['album', 'camera'] as Array<string>
+			}
+		},
+		compressed: {
+			type: Boolean,
+			default: true
+		},
+		camera: {
+			type: String,
+			default: 'back'
+		},
+		maxDuration: {
+			type: Number,
+			default: 60
+		},
+		uploadIcon: {
+			type: String,
+			default: 'camera-fill'
+		},
+		uploadIconColor: {
+			type: String,
+			default: '#D3D4D6'
+		},
+		useBeforeRead: {
+			type: Boolean,
+			default: false
+		},
+		afterRead: {
+			type: Function,
+			default: null
+		},
+		beforeRead: {
+			type: Function,
+			default: null
+		},
+		previewFullImage: {
+			type: Boolean,
+			default: true
+		},
+		maxCount: {
+			type: [String, Number],
+			default: 52
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		imageMode: {
+			type: String,
+			default: 'aspectFill'
+		},
+		name: {
+			type: String,
+			default: ''
+		},
+		sizeType: {
+			type: Array as PropType<Array<string>>,
+			default(): Array<string> {
+				return ['original', 'compressed'] as Array<string>
+			}
+		},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		deletable: {
+			type: Boolean,
+			default: true
+		},
+		maxSize: {
+			type: [String, Number],
+			default: Number.MAX_VALUE
+		},
+		fileList: {
+			type: Array as PropType<Array<UTSJSONObject>>,
+			default(): Array<UTSJSONObject> {
+				return [] as Array<UTSJSONObject>
+			}
+		},
+		uploadText: {
+			type: String,
+			default: ''
+		},
+		width: {
+			type: [String, Number],
+			default: 80
+		},
+		height: {
+			type: [String, Number],
+			default: 80
+		},
+		previewImage: {
+			type: Boolean,
+			default: true
+		},
+		autoDelete: {
+			type: Boolean,
+			default: false
+		},
+		autoUpload: {
+			type: Boolean,
+			default: false
+		},
+		autoUploadApi: {
+			type: String,
+			default: ''
+		},
+		autoUploadDriver: {
+			type: String,
+			default: ''
+		},
+		autoUploadAuthUrl: {
+			type: String,
+			default: ''
+		},
+		autoUploadHeader: {
+			type: Object as PropType<UTSJSONObject>,
+			default(): UTSJSONObject {
+				return {} as UTSJSONObject
+			}
+		},
+		getVideoThumb: {
+			type: Boolean,
+			default: false
+		},
+		customAfterAutoUpload: {
+			type: Boolean,
+			default: false
+		},
+		videoPreviewObjectFit: {
+			type: String,
+			default: 'cover'
+		},
+		customStyle: {
+			type: [Object, String],
+			default(): UTSJSONObject {
+				return {} as UTSJSONObject
+			}
+		}
+	})
+	const emit = defineEmits(['error', 'beforeRead', 'oversize', 'afterRead', 'delete', 'clickPreview', 'update:fileList', 'afterAutoUpload'])
+	const successIcon = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAKAAAAAB65masAAACP0lEQVRYCc3YXygsURwH8K/dpcWyG3LF5u/6/+dKVylSypuUl6uUPMifKMWL8oKEB1EUT1KeUPdR3uTNUsSLxb2udG/cbvInNuvf2rVnazZ/ZndmZ87snjM1Z+Z3zpzfp9+Z5mEAhlvjRtZgCKs+gnPAOcAkkMOR4jEHfItjDvgRxxSQD8cM0BuOCaAvXNCBQrigAsXgggYUiwsK0B9cwIH+4gIKlIILGFAqLiBAOTjFgXJxigJp4BQD0sIpAqSJow6kjSNAFTnRaHJwLenD6Mud52VQAcrBfTd2oyq+HtGaGGWAcnAVcXWoM3bCZrdi+ncPfaAcXE5UKVpdW/vitGPqqAtn98d0gXJwX7Qp6MmegUYVhvmTIezdmHlxJCjpHRTCFerLkRRu4k0aqdajN3sWOo0BK//msHa+xDuPC/oNFMKRhTtM4xjIX0SCNpXL4+7VIaHuyiWEp2L7ahWLf8fejfPdqPmC3mJicORZUp1CQzm+GiphvljGk+PBvWRbxii+xVTj5M6CiZ/tsDufvaXyxEUDxeLIyvu3m0iOyEFWVAkydcVYdyFrE9tQk9iMq6f/GNlvwt3LjQfh60LUrw9/cFyyMJUW/XkLSNMV4Mi6C5ML+ui4x5ClAX9sB9w0wV6wglJwJCv5fOxcr6EstgbGiEw4XcfUry4cWrcEUW8n+ARKxXEJHhw2WG43UKSvwI/TSZgvl7kh0b3XLZaLEy0QmMgLZAVH7J+ALOE+AVnDvQOyiPMAWcW5gSzjCPAV+78S5WE0GrQAAAAASUVORK5CYII=')
+	const lists = ref([] as Array<UPUploadListItem>)
+	const isInCount = ref(true)
+	const popupShow = ref(false)
+	const currentItemIndex = ref(-1)
+	const addUnit = (e: any): string => addUnitFn(e)
+	const addStyle = (e: any): any => addStyleFn(e)
+	const rootStyle = computed((): UTSJSONObject => {
+		let customStyle = {} as any
+		if (props.customStyle != null) {
+			customStyle = props.customStyle as any
+		}
+		return addStyleFn(customStyle) as UTSJSONObject
+	})
+	const previewStyle = computed((): UTSJSONObject => {
+		return {
+			width: addUnitFn(props.width),
+			height: addUnitFn(props.height)
+		} as UTSJSONObject
+	})
+	function getProgressStyle(item: UPUploadListItem): UTSJSONObject {
+		const progress = numericValue(item.progress, 0)
+		return {
+			width: progress.toString() + '%'
+		} as UTSJSONObject
+	}
+	function getPreviewOtherText(item: UPUploadListItem): string {
+		const itemName = item.name
+		if (itemName != null && itemName.toString() != '') {
+			return itemName.toString()
+		}
+		return item.isVideo || (item.type != null && item.type === 'video') ? t("up.common.video") : t("up.common.file")
+	}
+	function videoErrorCallback() {}
+	const loadedVideoMetadata = (e: any) => {
+		if (currentItemIndex.value < 0) {
+			return
+		}
+		if (props.autoUploadDriver != 'local') {
+			return
+		}
+		if (!props.getVideoThumb) {
+			return
+		}
+		// 截取第一帧作为封面，oss等云存储场景直接使用拼接参数。
+		const currentItem = lists.value[currentItemIndex.value]
+		let w = currentItem.width
+		let h = currentItem.height
+		const dpr = uni.getSystemInfoSync().pixelRatio
+		// TODO2026
+		// uni.createSelectorQuery().select('#myVideo').context(res => {
+		// 	console.log('select video', res)
+		// 	const myVideo = res.context
+		// 	uni.createSelectorQuery()
+		// 	  .select('#myCanvas')
+		// 	  .fields({ node: true, size: true })
+		// 	  .exec(([res]) => {
+		// 		console.log('select canvas', res)
+		// 		const ctx1 = res[0].node.getContext('2d')
+		// 		res[0].node.width = w * dpr
+		// 		res[0].node.height = h * dpr
+		// 		// Draw the first frame and export it as an image
+		// 		// myVideo.onPlay(() => {
+		// 			setTimeout(() => {
+		// 				captureFirstFrame()
+		// 			}, 500)
+		// 		// })
+		// 		const captureFirstFrame = () => {
+		// 			ctx1.drawImage(myVideo, 0, 0, w * dpr, h * dpr)
+		// 			wx.canvasToTempFilePath({
+		// 				canvas: res[0].node,
+		// 				success: (result) => {
+		// 					console.log('First frame image path:', result
+		// 						.tempFilePath)
+		// 					// Now you can use the image path (result.tempFilePath)
+		// 					props.fileList['currentItemIndex'].thumb = result.tempFilePath
+		// 				},
+		// 				fail: (err) => {
+		// 					console.error('Failed to export image:', err)
+		// 				}
+		// 			})
+		// 		}
+
+		// 		// Capture the first frame
+		// 		setInterval(() => {
+		// 			ctx1.drawImage(myVideo, 0, 0, w * dpr, h * dpr);
+		// 		}, 1000 / 24)
+		// 	}).exec()
+		// }).exec()
+	}
+	function formatFileList() {
+		let fileList = props.fileList as UTSJSONObject[]
+		let maxCount = parseInt(props.maxCount.toString())
+		let formatLists = [] as UPUploadListItem[]
+		fileList.forEach((item: UTSJSONObject) => {
+			const name = item['name'] != null
+				? item['name'] as string
+				: item['url'] != null ? item['url'] as string : item['thumb'] as string
+			let tmp = UTSJSONObject.assign(UTSJSONObject.assign({}, item), {
+				// 如果item.url为本地选择的blob文件的话，无法判断其为video还是image，此处优先通过accept做判断处理
+				isImage: item['name'] != null ? testImage(item['name'] as string) : props.accept === 'image',
+				isVideo: item['name'] != null ? testVideo(item['name'] as string) : props.accept === 'video',
+				deletable: typeof item['deletable'] === 'boolean' ? item['deletable'] as boolean : props.deletable,
+			})
+			let tmpObj = (JSON.parse<UPUploadListItem>(JSON.stringify(tmp)))
+			if (tmpObj != null) {
+				formatLists.push(tmpObj!)
+			}
+		})
+		lists.value = formatLists
+		isInCount.value = formatLists.length < maxCount
+	}
+	function getDetail(index: number|null = null): UTSJSONObject {
+		const fileList = props.fileList as Array<UTSJSONObject>
+		return {
+			name: props.name,
+			// @ts-ignore
+			index: index == null ? fileList.length : index,
+		} as UTSJSONObject
+	}
+	function updateUpload(index: number, param: UTSJSONObject) {
+		const fileList = props.fileList as Array<UTSJSONObject>
+		let item = fileList[index]
+		fileList.splice(index, 1, {
+			...item as UTSJSONObject,
+			status: param['progress'] as number == 100 ? 'success' : 'uploading',
+			message: '',
+			progress: param['progress'] as number
+		})
+		emit('update:fileList', fileList)
+	}
+	function succcessUpload(index: number, url: string, thumb: string = '') {
+		const fileList = props.fileList as Array<UTSJSONObject>
+		let item = fileList[index]
+		fileList.splice(index, 1, {
+			...item as UTSJSONObject,
+			status: 'success',
+			message: '',
+			url: url,
+			progress: 100,
+			thumb: thumb
+		})
+		emit('update:fileList', fileList)
+	}
+	function emitAfterAutoUpload(res: UTSJSONObject | null, index: number, defaultUrl: string = '', defaultThumb: string = '') {
+		const payload = UTSJSONObject.assign(res != null ? res : ({} as UTSJSONObject), {
+			url: defaultUrl,
+			thumb: defaultThumb,
+			callback: (r: UTSJSONObject) => {
+				const url = r.getString('url') ?? defaultUrl
+				if (url == '') {
+					return
+				}
+				const thumb = r.getString('thumb') ?? defaultThumb
+				succcessUpload(index, url, thumb)
+			}
+		})
+		emit('afterAutoUpload', payload)
+	}
+	async function onAfterRead(file: Array<UPUploadFileChoosed|null>) {
+		let maxSize = numericValue(props.maxSize, Number.MAX_VALUE)
+		let afterRead = props.afterRead
+		const fileList = props.fileList as Array<UTSJSONObject>
+		const even = (item: UPUploadFileChoosed|null): boolean => {
+			let tmp: number = (item != null && item.size != null) ? item.size : 0
+			return tmp > maxSize
+		}
+		const oversize = file.some(even)
+		if (oversize) {
+			uni.showToast({
+				title: t("up.upload.sizeExceed")
+			})
+			emit('oversize', UTSJSONObject.assign({
+				file
+			}, getDetail(null)))
+			return
+		}
+		let len = fileList.length
+		if (props.autoUpload) {
+			let uploadLists = [] as Array<UPUploadFileChoosed>
+			file.forEach((item: UPUploadFileChoosed|null) => {
+				if (item != null) {
+					uploadLists.push(item)
+				}
+			})
+			uploadLists.map((item: UPUploadFileChoosed) => {
+				fileList.push({
+					...item as UTSJSONObject,
+					status: 'uploading',
+					message: t("up.upload.uploading"),
+					progress: 0
+				})
+			})
+			emit('update:fileList', fileList)
+			for (let i = 0; i < uploadLists.length; i++) {
+				let j = i
+				let result = ''
+				switch(props.autoUploadDriver) {
+					case 'cos':
+						break
+					case 'kodo':
+						break
+					case 'oss':
+					case 'upload_oss':
+						console.log()
+						let formData = {} as UTSJSONObject
+						uni.request({
+							url: props.autoUploadAuthUrl,
+							method: 'GET',
+							header: props.autoUploadHeader,
+							data: {
+								filename: uploadLists[j]['name'] as string
+							},
+							success: (ret: RequestSuccess<any>) => {
+								let res0 = ret.data as UTSJSONObject
+								if (res0['code'] as number == 200) {
+									formData = res0!!.getAny('data.params') as UTSJSONObject
+								} else {
+									uni.showToast({
+										title: res0['msg'] as string,
+										duration: 1500
+									})
+									return
+								}
+								if (res0!!.getString('data.params.host') != null) {
+									var uploadTask = uni.uploadFile({
+										url: res0!!.getString('data.params.host') ?? '',
+										filePath: uploadLists[j].url,
+										name: 'file',
+										formData: formData,
+										success: (uploadFileRes: UploadFileSuccess) => {
+											let thumb = ''
+											let uploadRes = JSON.parseObject(uploadFileRes.data)
+											result = res0!!.getString("data.params.host") + '/' + res0!!.getString("data.params.key")
+											if (props.accept === 'video' || testVideo(result)) {
+												thumb = result + '?x-oss-process=video/snapshot,t_10000,m_fast'
+											}
+											if (props.customAfterAutoUpload) {
+												emitAfterAutoUpload(uploadRes, len + j, result, thumb)
+											} else {
+												succcessUpload(len + j, result, thumb)
+											}
+										}
+									})
+									uploadTask.onProgressUpdate((res) => {
+										updateUpload(len + j, {
+											progress: res.progress
+										} as UTSJSONObject)
+									})
+								}
+							}
+						})
+						break
+					case 'local':
+					default:
+						var uploadTask = uni.uploadFile({
+							url: props.autoUploadApi,
+							filePath: uploadLists[j].url,
+							name: 'file',
+							header: props.autoUploadHeader,
+							success: (uploadFileRes: UploadFileSuccess) => {
+								let res0 = JSON.parseObject(uploadFileRes.data)
+								if (props.customAfterAutoUpload) {
+									emitAfterAutoUpload(res0, len + j)
+								} else {
+									if (res0!!['code'] as number != 200) {
+										uni.showToast({
+											title: res0!!['msg'] as string
+										})
+									} else {
+										result = res0!!.getString('data.url') ?? ''
+										succcessUpload(len + j, result)
+									}
+								}
+							}
+						})
+						uploadTask.onProgressUpdate((res) => {
+							updateUpload(len + j, {
+								progress: res.progress
+							} as UTSJSONObject)
+						})
+						break
+				}
+			}
+		} else {
+			if (typeof afterRead === 'function') {
+				;(afterRead as UPUploadReadCallback)(file, getDetail(null))
+			}
+			emit('afterRead', UTSJSONObject.assign({
+				file
+			}, getDetail(null)))
+		}
+	}
+	function onBeforeRead(file: Array<UPUploadFileChoosed|null>) {
+		let beforeRead = props.beforeRead
+		let useBeforeRead = props.useBeforeRead
+		let res: any = file
+		if (beforeRead != null && testFunc(beforeRead)) {
+			res = (beforeRead as UPUploadReadCallback)(file, getDetail(null))
+		}
+		if (useBeforeRead) {
+			emit(
+				'beforeRead',
+				UTSJSONObject.assign(UTSJSONObject.assign({
+					file
+				}, getDetail(null)), {
+					callback: (ok: boolean) => {
+						if (ok) {
+							onAfterRead(file)
+						}
+					},
+				})
+			)
+			return
+		}
+		if (testPromise(res)) {
+			// res.then((data) => onAfterRead(data != null ? data : file))
+		} else {
+			if (typeof res == 'boolean' && !(res as boolean)) {
+				return
+			}
+			const readFile = (res != null ? res : file) as Array<UPUploadFileChoosed | null>
+			onAfterRead(readFile)
+		}
+	}
+	function chooseFile(params: UTSJSONObject = {} as UTSJSONObject): boolean {
+		let maxCount = parseInt(props.maxCount.toString())
+		let currentLists = lists.value
+		let disabled = props.disabled
+		if (disabled) return false
+		const chooseParams = UTSJSONObject.assign({
+			accept: props.accept,
+			extension: props.extension,
+			multiple: props.multiple,
+			capture: props.capture,
+			compressed: props.compressed,
+			maxDuration: props.maxDuration,
+			sizeType: props.sizeType,
+			camera: props.camera,
+		}, {
+			maxCount: maxCount - currentLists.length,
+			...params
+		})
+		// @ts-ignore
+		let chooseParamsObj = JSON.parseObject(JSON.stringify(chooseParams)) as UPUploadChooseFileOptions
+		chooseUploadFile(chooseParamsObj).then((res: Array<UPUploadFileChoosed|null>) => {
+			const result = chooseParams['multiple'] != null && chooseParams['multiple'] != false ? res : res
+			onBeforeRead(result)
+		})
+		return true
+	}
+	function deleteItem(index: number) {
+		const fileList = props.fileList as Array<UTSJSONObject>
+		if (props.autoDelete) {
+			fileList.splice(index, 1)
+			emit('update:fileList', fileList)
+		} else {
+			emit(
+				'delete',
+				UTSJSONObject.assign(UTSJSONObject.assign({}, getDetail(index)), {
+					file: fileList[index],
+				})
+			)
+		}
+	}
+	function onPreviewImage(previewItem: UPUploadListItem, index: number) {
+		if (!previewItem.isImage || !props.previewFullImage) return
+		let current = 0
+		const urls = [] as Array<string>
+		let imageIndex = 0
+		for (var i = 0; i < lists.value.length; i++) {
+			const item = lists.value[i]
+			if (item.isImage || (item.type != null && item.type === 'image')) {
+				urls.push(item.url != null ? item.url as string : item.thumb as string)
+				if (i === index) {
+					current = imageIndex
+				}
+				imageIndex += 1
+			}
+		}
+		if (urls.length < 1) {
+			return
+		}
+		uni.previewImage({
+			urls: urls,
+			current: current,
+			fail() {
+				toast(t("up.upload.previewImageFail"))
+			},
+		})
+	}
+	function onPreviewVideo(previewItem: UPUploadListItem, index: number) {
+		if (!props.previewFullImage) return
+		let current = 0
+		const sources = [] as Array<UTSJSONObject>
+		let videoIndex = 0
+		for (var i = 0; i < lists.value.length; i++) {
+			const item = lists.value[i]
+			if (item.isVideo || (item.type != null && item.type === 'video')) {
+				const source = {
+					url: item.url,
+					type: 'video'
+				} as UTSJSONObject
+				if (item.thumb != null) source['poster'] = item.thumb
+				sources.push(source)
+				if (i === index) {
+					current = videoIndex
+				}
+				videoIndex += 1
+			}
+		}
+		if (sources.length < 1) {
+			return
+		}
+		// #ifndef MP-WEIXIN
+		popupShow.value = true
+		currentItemIndex.value = index
+		console.log(lists.value[currentItemIndex.value])
+		// #endif
+		// #ifdef MP-WEIXIN
+		wx.previewMedia({
+			sources: sources,
+			current: current,
+			fail() {
+				toast(t("up.upload.previewVideoFail"))
+			},
+		})
+		// #endif
+	}
+	function onClickPreview(item: UPUploadListItem, index: number) {
+		if (props.previewFullImage) {
+			switch (item.type) {
+				case 'image':
+					onPreviewImage(item, index)
+					break
+				case 'video':
+					onPreviewVideo(item, index)
+					break
+				default:
+					break
+			}
+		}
+		// #ifdef APP
+		const previewItem = item as UTSJSONObject
+		// #endif
+		// #ifndef APP
+		const previewItem = item as any
+		// #endif
+		emit(
+			'clickPreview',
+			UTSJSONObject.assign(UTSJSONObject.assign({}, previewItem), getDetail(index))
+		)
+	}
+	watch((): Array<UTSJSONObject> => props.fileList as Array<UTSJSONObject>, () => {
+		formatFileList()
+	}, { immediate: true, deep: true })
+	watch((): boolean => props.deletable, () => {
+		formatFileList()
+	})
+	watch((): any => props.maxCount, () => {
+		formatFileList()
+	})
+	watch((): string => props.accept, (val: string) => {
+		// #ifndef MP-WEIXIN
+		if (val === 'all' || val === 'media') {
+			error('只有微信小程序才支持把accept配置为all、media之一')
+		}
+		// #endif
+		// #ifndef H5 || MP-WEIXIN
+		if (val === 'file') {
+			error('只有微信小程序和H5(HX2.9.9)才支持把accept配置为file')
+		}
+		// #endif
+	}, { immediate: true })
+	watch((): string => props.accept, () => {
+		formatFileList()
+	})
+	watch(popupShow, (newVal: boolean) => {
+		if (!newVal) {
+			currentItemIndex.value = -1
+		}
+	})
+	defineExpose({
+		formatFileList,
+		chooseFile,
+		onBeforeRead,
+		getDetail,
+		onAfterRead,
+		emitAfterAutoUpload,
+		updateUpload,
+		succcessUpload,
+		deleteItem,
+		onPreviewImage,
+		onPreviewVideo,
+		onClickPreview,
+		loadedVideoMetadata,
+		videoErrorCallback,
+		lists,
+		isInCount,
+		popupShow,
+		currentItemIndex
+	})
+</script>
+
+<style lang="scss" scoped>
+	$up-upload-preview-border-radius: 2px !default;
+	$up-upload-preview-margin: 0 8px 8px 0 !default;
+	$up-upload-image-width:80px !default;
+	$up-upload-image-height:$up-upload-image-width;
+	$up-upload-other-bgColor: rgb(242, 242, 242) !default;
+	$up-upload-other-flex:1 !default;
+	$up-upload-text-font-size:11px !default;
+	$up-upload-text-color:$up-tips-color !default;
+	$up-upload-text-margin-top:2px !default;
+	$up-upload-deletable-right:0 !default;
+	$up-upload-deletable-top:0 !default;
+	$up-upload-deletable-bgColor:rgb(55, 55, 55) !default;
+	$up-upload-deletable-height:14px !default;
+	$up-upload-deletable-width:$up-upload-deletable-height;
+	$up-upload-deletable-boder-bottom-left-radius:100px !default;
+	$up-upload-deletable-zIndex:3 !default;
+	$up-upload-success-bottom:0 !default;
+	$up-upload-success-right:0 !default;
+	$up-upload-success-border-style:solid !default;
+	$up-upload-success-border-top-color:transparent !default;
+	$up-upload-success-border-left-color:transparent !default;
+	$up-upload-success-border-bottom-color: $up-success !default;
+	$up-upload-success-border-right-color:$up-upload-success-border-bottom-color;
+	$up-upload-success-border-width:9px !default;
+	$up-upload-icon-top:0px !default;
+	$up-upload-icon-right:0px !default;
+	$up-upload-icon-h5-top:1px !default;
+	$up-upload-icon-h5-right:0 !default;
+	$up-upload-icon-width:16px !default;
+	$up-upload-icon-height:$up-upload-icon-width;
+	$up-upload-success-icon-bottom:-10px !default;
+	$up-upload-success-icon-right:-10px !default;
+	$up-upload-status-right:0 !default;
+	$up-upload-status-left:0 !default;
+	$up-upload-status-bottom:0 !default;
+	$up-upload-status-top:0 !default;
+	$up-upload-status-bgColor:rgba(0, 0, 0, 0.5) !default;
+	$up-upload-status-icon-Zindex:1 !default;
+	$up-upload-message-font-size:12px !default;
+	$up-upload-message-color:#FFFFFF !default;
+	$up-upload-message-margin-top:5px !default;
+	$up-upload-button-width:80px !default;
+	$up-upload-button-height:$up-upload-button-width;
+	$up-upload-button-bgColor:rgb(244, 245, 247) !default;
+	$up-upload-button-border-radius:2px !default;
+	$up-upload-botton-margin: 0 8px 8px 0 !default;
+	$up-upload-text-font-size:11px !default;
+	$up-upload-text-color:$up-tips-color !default;
+	$up-upload-text-margin-top: 2px !default;
+	$up-upload-hover-bgColor:rgb(230, 231, 233) !default;
+	$up-upload-disabled-opacity:.5 !default;
+
+	.up-upload {
+		@include flex(column);
+		flex: 1;
+
+		&__wrap {
+			@include flex;
+			flex-wrap: wrap;
+			// flex: 1;
+
+			&__preview {
+				border-radius: $up-upload-preview-border-radius;
+				margin: $up-upload-preview-margin;
+				position: relative;
+				overflow: hidden;
+				@include flex;
+
+				&__image {
+					width: $up-upload-image-width;
+					height: $up-upload-image-height;
+				}
+
+				&__video,
+				&__other {
+					width: $up-upload-image-width;
+					height: $up-upload-image-height;
+					background-color: $up-upload-other-bgColor;
+					flex: $up-upload-other-flex;
+					@include flex(column);
+					justify-content: center;
+					align-items: center;
+
+					&__text {
+						font-size: $up-upload-text-font-size;
+						color: $up-upload-text-color;
+						margin-top: $up-upload-text-margin-top;
+					}
+				}
+			}
+		}
+		&__wrap__play {
+			position: absolute;
+			top: 0px;
+			left: 0px;
+			bottom: 0px;
+			right: 0px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			&__icon {
+				background: #fff;
+				border-radius: 100px;
+				opacity: 0.8;
+			};
+		}
+
+		&__deletable {
+			position: absolute;
+			top: $up-upload-deletable-top;
+			right: $up-upload-deletable-right;
+			background-color: $up-upload-deletable-bgColor;
+			height: $up-upload-deletable-height;
+			width: $up-upload-deletable-width;
+			@include flex;
+			border-bottom-left-radius: $up-upload-deletable-boder-bottom-left-radius;
+			align-items: center;
+			justify-content: center;
+			z-index: $up-upload-deletable-zIndex;
+
+			&__icon {
+				position: absolute;
+				transform: scale(0.7);
+				top: $up-upload-icon-top;
+				right: $up-upload-icon-right;
+				/* #ifdef H5 */
+				top: $up-upload-icon-h5-top;
+				right: $up-upload-icon-h5-right;
+				/* #endif */
+			}
+		}
+
+		&__success {
+			position: absolute;
+			bottom: $up-upload-success-bottom;
+			right: $up-upload-success-right;
+			@include flex;
+			// 由于weex(nvue)为阿里巴巴的KPI(部门业绩考核)的laji产物，不支持css绘制三角形
+			// 所以在nvue下使用图片，非nvue下使用css实现
+			/* #ifndef APP-NVUE */
+			border-style: $up-upload-success-border-style;
+			border-top-color: $up-upload-success-border-top-color;
+			border-left-color: $up-upload-success-border-left-color;
+			border-bottom-color: $up-upload-success-border-bottom-color;
+			border-right-color: $up-upload-success-border-right-color;
+			border-width: $up-upload-success-border-width;
+			align-items: center;
+			justify-content: center;
+			/* #endif */
+
+			&__icon {
+				/* #ifndef APP-NVUE */
+				position: absolute;
+				transform: scale(0.7);
+				bottom: $up-upload-success-icon-bottom;
+				right: $up-upload-success-icon-right;
+				/* #endif */
+				/* #ifdef APP-NVUE */
+				width: $up-upload-icon-width;
+				height: $up-upload-icon-height;
+				/* #endif */
+			}
+		}
+		&__progress {
+			background-color: $up-primary !important;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+		}
+
+		&__status {
+			position: absolute;
+			top: $up-upload-status-top;
+			bottom: $up-upload-status-bottom;
+			left: $up-upload-status-left;
+			right: $up-upload-status-right;
+			background-color: $up-upload-status-bgColor;
+			@include flex(column);
+			align-items: center;
+			justify-content: center;
+
+			&__icon {
+				position: relative;
+				z-index: $up-upload-status-icon-Zindex;
+			}
+
+			&__message {
+				font-size: $up-upload-message-font-size;
+				color: $up-upload-message-color;
+				margin-top: $up-upload-message-margin-top;
+			}
+		}
+
+		&__button {
+			@include flex(column);
+			align-items: center;
+			justify-content: center;
+			width: $up-upload-button-width;
+			height: $up-upload-button-height;
+			background-color: $up-upload-button-bgColor;
+			border-radius: $up-upload-button-border-radius;
+			margin: $up-upload-botton-margin;
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+			/* #endif */
+
+			&__text {
+				font-size: $up-upload-text-font-size;
+				color: $up-upload-text-color;
+				margin-top: $up-upload-text-margin-top;
+			}
+
+			&--hover {
+				background-color: $up-upload-hover-bgColor;
+			}
+
+			&--disabled {
+				opacity: $up-upload-disabled-opacity;
+			}
+		}
+	}
+</style>