vue2+elementui 文件夹上传，解决vue-simple-uploader安装报错

最新推荐文章于 2025-06-17 09:53:32 发布

m0_58278738

最新推荐文章于 2025-06-17 09:53:32 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/m0_58278738/article/details/128560455

本文介绍如何在Vue2项目中结合ElementUI实现文件夹上传功能，使用vue-simple-uploader插件，详细讲解配置和使用过程，包括解决安装报错问题，以及关键事件的监听和处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elementui只支持文件上传，而不支持文件夹上传

需求：增加文件夹上传功能

此篇文章只针对我的项目，类似的可以借鉴。大概逻辑：

使用插件来支持选择文件夹上传，获取到上传的文件夹和里面的文件，把文件上传至oss，调用后端的创建文件/文件夹接口，刷新列表。

使用插件：vue-simple-uploader，该组件基于simple-uploader.js封装的vue组件，大多数配置选项可以参照simple-uploader.js。

1、下载vue-simple-uploader

npm install vue-simple-uploader --save

2、首先初始化，在main.js中加入以下代码：

import uploader from 'vue-simple-uploader'
Vue.use(uploader)

3、使用

组件使用

<uploader 
    ref="uploader" 
    class="uploader-example" 
    @file-success="onFileSuccess" 
    @complete="completeUpload"
 >
  <uploader-btn id="uploader-upload-btn">选择文件</uploader-btn>
  <uploader-btn id="uploader-upload-btn" :directory="true">选择文件夹</uploader-btn>
</uploader>

样式，写了个elementui按钮样式，需要的话可以直接用

#uploader-upload-btn{
  color: #FFF;
  background-color: #409EFF;
  border-color: #409EFF;
  font-size: 12px;
  border-radius: 3px;
  padding: 7px 15px;
  outline: 0;
  font-weight: 500;
  &:hover{
    background: #66b1ff;
    border-color: #66b1ff;
    color: #FFF;
  }
}

本次只用到了两个事件

methods: {
    onFileSuccess(rootFile) {
      // 上传成功获取到根文件夹
      this.folder = rootFile
    }
    completeUpload() {
      // 上传oss就不写啦，就把逻辑理一下

      // 这里在上传成功后自己处理把文件上传到oss，this.folder.fileList为根文件夹内的子文件列表
      // 上传文件夹内的子文件，需要把文件夹的路径带上：‘上传页面的路径/文件夹标识’

      // 然后，调用创建文件/文件夹接口，接口中只需要传父文件夹标识，当前文件（夹）的标识、名字、大小、后缀等字段，后端先根据你传的文件夹创建文件夹，再根据你的文件夹标识去oss获取子文件，最后我们再刷新列表，就上传成功并显示拉！！！

    },
    
  }

避坑：

安装好插件之后，报错：

原因：其实是包里面的链式操作报错，把链式操作删除就不会报错，可以通过配置一个解析器解决

解决：vue.config.js中使用transpileDependencies属性配置node_modules中指定哪些文件夹或文件需要编译.

transpileDependencies: [
    /[/\\]node_modules[/\\]xmind-embed-viewer[/\\]/
],

常用属性：

autoStart {Boolean}：默认 true, 是否选择文件后自动开始上传。

fileStatusText {Object}：文件状态，文件在上传时会响应几种状态:

{ success: 'success', error: 'error', uploading: 'uploading', paused: 'paused', waiting: 'waiting'}

注：上传文件夹相比上传文件，在按钮上就多了一个:directory="true"属性

常用方法：

assignBrowse(domNodes, isDirectory, singleFile,attributes )，封装组件时，你用到的按钮可能不是组件上传的按钮，这时候你就需要把按钮绑定成上传的按钮，这时候就需要操作DOM。

getSize(): 获取上传文件的总大小

progress():获取上传文件的进度，返回0-1之间的浮点数

addFile(file):添加一个H5对象到文件列表

常用事件：

fileSuccess(rootFile, file, message, chunk)：上传成功触发，完成一个特定的文件上传，rootFile是根文件夹，file是要上传的文件对象，message是服务器返回的响应信息，第四个参数' chunk '是' Uploader.Chunk '的实例。

complete：所有文件上传完成触发

fileProgress(rootFile):：获取文件上传的进度,rootFile是所有文件

fileError(rootFile, file, message, chunk)：特定的文件上传失败，可在这个回调函数中给用户提示

fileAdded(file, event): 用于文件的验证，可以判断可接受的文件类型，不支持的格式会返回false,拒绝上传，添加文件时，同样也可使用浏览器的event对象

filesAdded(files, fileList, event): 和.fileAdded相同，不过是用于多文件的验证

注：所有的事件都会通过 lodash.kebabCase 做转换，例如 fileSuccess 就会变成 file-success。例：

<uploader @file-success="onFileSuccess" @complete="completeUpload"></uploader>

参考文章：

https://juejin.cn/post/7040817922540830728

https://www.helloweba.net/javascript/632.html

https://www.cnblogs.com/hkb924/p/15993576.html