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>