Element UI组件库实现upload文件夹上传

最近有个一个需求，需要上传文件夹以及文件夹中的文件，并且上传文件包含原始的目录结构，例如：text/text001/001.jpg（文件夹结构），上传时选取text文件夹，点击后获取上传文件001.jpg，上传信息：new FormData({'file': file, 'fileUrl': text/text001/001.jpg})

1. 开启el-upload组件的文件夹上传功能

• uplaod组件添加ref属性 <el-upload ref="fileUpload" />
• 获取上传组件内部 input标签 并将其webkitdirectory属性设置为true

// 页面加载时执行, 开启文件夹上传功能
onMounted(() => {
	nextTick(() => {
		if (props.type === 'fileUploader' && fileUpload.value && fileUpload.value.$el.querySelector('input')) {
			fileUpload.value.$el.querySelector('input').webkitdirectory = true;
		}
	});
});

使用el-upload的http-request属性获取文件属性

• 增加http-request上传钩子

<el-upload ref="fileUpload" :action="url" :http-request="handleUploadRequest">

• 获取钩子函数回传文件数据

const handleUploadRequest = (options: any) => {
	const formData = new FormData();
	const file = options.file;
	const filePath = file.webkitRelativePath;
	// 获取上传文件的文件夹路径
	let lastSlashIndex = filePath.lastIndexOf('/');
	let result = filePath.substring(0, lastSlashIndex);
	bucketName.value = result
	formData.append('file', file);
	formData.append('bucketName', bucketName.value.replace(/\/\/+/g, "/"));
	upload(formData).then((response) => {
            // console.log('response', response);
            // 上传成功处理
            handleUploadSuccess(response, file);
            }).catch((error) => {
                // 上传失败处理
                handleUploadError();
            });
};