OnlineEducation-teacher-front/src/views/myResource/resourceLibrary/file/test.vue

<template>
	<uploader
		:options="options"
		:file-status-text="statusText"
		class="uploader-example"
		ref="uploaderRef"
		@file-complete="fileComplete"
		@complete="complete"
	>
		<uploader-unsupport></uploader-unsupport>
		<!-- 选择按钮 在这里隐藏 -->
		<uploader-btn class="select-file-btn" :attrs="attrs" ref="uploadBtn"> 选择文件 </uploader-btn>
		<uploader-btn class="select-file-btn" :attrs="attrs" :directory="true" ref="uploadDirBtn"> 选择目录 </uploader-btn>

		<!-- <uploader-unsupport></uploader-unsupport>-->
		<uploader-drop>
			<p>Drop files here to upload or</p>
			<uploader-btn>select files</uploader-btn>
			<uploader-btn :attrs="attrs">select images</uploader-btn>
			<uploader-btn :directory="true">select folder</uploader-btn>
		</uploader-drop>
		<uploader-list></uploader-list>
	</uploader>
</template>

<script setup>
	import { ref, onMounted, nextTick } from 'vue'
	const props = defineProps({
		uploadWay: Number,
		callback: Function,
		serviceEl: Object,
		callType: Number,
		params: Object
	})
	// refs
	const uploaderRef = ref(null)
	const uploadBtn = ref(null)
	const uploadDirBtn = ref(null)
	// 响应式数据
	const options = ref({
		target: '//localhost:3000/upload', // '//jsonplaceholder.typicode.com/posts/',
		testChunks: false
	})

	const attrs = ref({
		accept: 'image/*'
	})

	const statusText = ref({
		success: 'success',
		error: 'error',
		uploading: 'uploading',
		paused: 'paused',
		waiting: 'waiting'
	})

	const handlePrepareUpload = async () => {
		// options.value.headers.token = getCookies(getConfig().tokenKeyName)
		await nextTick()
		switch (props.uploadWay) {
			case 1: {
				if (uploadBtn.value?.$el) {
					uploadBtn.value.$el.click()
				}
				break
			}
			case 2: {
				if (uploadDirBtn.value?.$el) {
					uploadDirBtn.value.$el.click()
				}
				break
			}
			case 3: {
				pasteImg.value.src = ''
				pasteImg.value.name = ''
				pasteImgObj.value = null
				dropBoxShow.value = true
				break
			}
		}
	}

	// 方法
	const complete = () => {
		console.log('complete', arguments)
	}

	const fileComplete = () => {
		console.log('file complete', arguments)
	}

	// 生命周期钩子
	onMounted(() => {
		nextTick(() => {
			window.uploader = uploaderRef.value.uploader
		})
	})

	// 暴露方法给父组件（如果需要）
	defineExpose({
		handlePrepareUpload
	})
</script>

<style>
	.uploader-example {
		width: 880px;
		padding: 15px;
		margin: 40px auto 0;
		font-size: 12px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	}
	.uploader-example .uploader-btn {
		margin-right: 4px;
	}
	.uploader-example .uploader-list {
		max-height: 440px;
		overflow: auto;
		overflow-x: hidden;
		overflow-y: auto;
	}
</style>