vue 中实现用户上传文件夹的功能

vue 中实现上传文件夹的功能

- 使用 input 元素的 webkitdirectory 属性
- 使用 vue-simple-uploader 组件

vue 中文件上传一般都是用 element 中的 upload 组件，upload 组件可以实现单个文件或者多个文件的上传，但是无法通过选择文件夹上传其中文件。

要实现文件夹上传，有两种方式：

使用 input 元素的 webkitdirectory 属性
使用 vue-simple-uploader 组件

使用 input 元素的 webkitdirectory 属性

webkitdirectory 属性是一个布尔值，表示是否只允许用户选择一个目录（或多个目录，如果同时存在 multiple 属性）。

注意：webkitdirectory 属性是一个非标准属性，并非所有浏览器都实现了这个属性。
在这里插入图片描述
实现方式如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Upload Folder</title>
</head>
<body><input type="file" id="folderInput" webkitdirectory multiple><button id="uploadButton">Upload</button><script>document.getElementById('uploadButton').addEventListener('click', async () => {// 获取上传的文件列表const input = document.getElementById('folderInput');const files = input.files;if (files.length === 0) {alert('Please select a folder first.');return;}// 创建 formdata 对象const formData = new FormData();for (const file of files) {formData.append('files', file)}// 调用后台接口，上传文件，此处省略</script>
</body>
</html>

使用 vue-simple-uploader 组件

首先安装 vue-simple-uploader

npm i vue-simple-uploader

然后在 main.js 中引入 vue-simple-uploader

import Vue from 'vue'
import uploader from 'vue-simple-uploader'
import App from './App.vue'Vue.use(uploader)/* eslint-disable no-new */
new Vue({render(createElement) {return createElement(App)}
}).$mount('#app')

在模板中使用

<template><uploader :options="options" class="uploader-example"><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>export default {data() {return {// 这里配置上传路径，手动上传的话就置空options: {// https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js// testChunks: false,},// 上传图片的配置attrs: {accept: "image/*",},loadingFile: false,};},methods: {// 文件添加到上传队列时的处理函数onFileAdded(file) {console.log("文件添加到队列：", file);},// 文件上传成功时的处理函数onFileSuccess(rootFile, file, response, chunk) {console.log("文件上传成功：", file, response);// 根据服务器返回的response处理业务逻辑},// 文件上传失败时的处理函数fileError(rootFile, file, response, chunk) {console.error("文件上传失败：", file, response);},// 开始上传时的处理函数uploadStr() {this.loadingFile = true; // 设置加载状态},// 所有文件上传完成时的处理函数uploadEnd() {this.loadingFile = false; // 重置加载状态},},}
</script><style>.uploader-example {width: 880px;padding: 15px;margin: 40px auto 0;font-size: 12px;box-shadow: 0 0 10px rgba(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>