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

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

    • [使用 input 元素的 webkitdirectory 属性](#使用 input 元素的 webkitdirectory 属性)
    • [使用 vue-simple-uploader 组件](#使用 vue-simple-uploader 组件)

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

要实现文件夹上传,有两种方式:

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

使用 input 元素的 webkitdirectory 属性

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

注意:webkitdirectory 属性是一个非标准属性,并非所有浏览器都实现了这个属性。

实现方式如下:

html 复制代码
<!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

sh 复制代码
npm i vue-simple-uploader

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

js 复制代码
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')

在模板中使用

html 复制代码
<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>

需要使用文件分片上传、秒传、断点续传功能可以参考这篇文章

相关推荐
秋名山大前端6 小时前
Chrome GPU 加速优化配置(前端 3D 可视化 / 数字孪生专用)
前端·chrome·3d
今天不要写bug6 小时前
antv x6实现封装拖拽流程图配置(适用于工单流程、审批流程应用场景)
前端·typescript·vue·流程图
luquinn6 小时前
实现统一门户登录跳转免登录
开发语言·前端·javascript
用户21411832636026 小时前
dify案例分享-5分钟搭建智能思维导图系统!Dify + MCP工具实战教程
前端
augenstern4166 小时前
HTML(面试)
前端
excel6 小时前
前端常见布局误区:1fr 为什么撑爆了我的容器?
前端
烛阴6 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
vayy6 小时前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
专注API从业者7 小时前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js
前端无冕之王7 小时前
一份兼容多端的HTML邮件模板实践与详解
前端·css·数据库·html