前端实现上传文件夹

我这里使用的环境是vue3的。

不多解释，直接上代码

dom

<template>
	<div>
		<input type="file" @change="selectFolder($event)" webkitdirectory />
		<div v-show="updataFile.show">
			<svg
				t="1670485030476"
				class="icon"
				viewBox="0 0 1180 1024"
				version="1.1"
				xmlns="http://www.w3.org/2000/svg"
				p-id="4347"
				width="16"
				height="16"
			>
				<path
					d="M1099.433546 289.842983h-1.08787v-99.462424a128.679511 128.679511 0 0 0-93.246023-126.65918v-3.263611A60.454505 60.454505 0 0 0 944.023508 0.003264H729.246837A60.454505 60.454505 0 0 0 668.326102 59.836128H122.526051A126.65918 126.65918 0 0 0 0.062941 190.380559V890.502778a12.277393 12.277393 0 0 0 2.331151 6.216401v1.243281c0 72.110257 46.623011 126.03754 113.760147 126.03754H969.821575c67.603366 0 105.212595-68.225006 122.463109-130.544431L1174.652004 419.610365c18.182974-75.063048-7.459682-129.767381-75.218458-129.767382z m-897.337556 0a160.072339 160.072339 0 0 0-132.253942 78.637479v-124.32803a73.198128 73.198128 0 0 1 46.623011-54.859743H668.326102a60.609915 60.609915 0 0 1 60.454505-59.988274h215.242901a60.609915 60.609915 0 0 1 60.454505 60.609914v3.108201a126.50377 126.50377 0 0 1 90.604052 97.908324z"
					fill="#613F9D"
					p-id="4348"
				></path>
			</svg>
			{{ updateFile.name }}
			<p>{{ updateFile.progress }}</p>
		</div>
	</div>
</template>

js

import { reactive } from 'vue'
import axios from 'axios'
let updateFile = reactive({
	name: '',
	progress: 0,
	show: false,
})
let selectFolder = (e) => {
	updateFile.show = true
	//文件夹里面所有文件
	var files = e.target.files
	//文件夹名称
	var relativePath = files[0].webkitRelativePath
	updateFile.name = relativePath.split('/')[0]
	//文件信息转换成FormData结构遍历上传
	for (var i = 0; i < files.length; i++) {
		var formData = new FormData()
		formData.append('file', files[i])
		// files[i]是上传的每一个文件对象，可以用来做详情里的
		//上传
		// TODO:这里是你的多文件上传请求接口，
		axios.post('/api', formData, {
			headers: {
				'Content-Type': 'multipart/form-data',
			},
			onUploadProgress: (progressEvent) => {
				if (progressEvent.lengthComputable) {
					var complete =
						((progressEvent.loaded / progressEvent.total) * 100) | 0
					updateFile.progress = complete
					if (complete >= 100) {
						updateFile.show = false
						updateFile.progress = 0 // 重新置0
					}
				}
			},
		})
	}
}