在现代Web应用开发中，文件上传是一个常见需求。然而，随着应用复杂性的增加，传统的文件上传方式可能无法满足所有需求，特别是当涉及到文件夹上传和大文件处理时。本文将介绍一个基于Vue.js的解决方案——vue-simple-uploader，它不仅支持文件夹上传，还具备强大的功能，能够满足多样化的上传需求。
业务场景
在某些业务场景中，用户需要上传整个文件夹，而不仅仅是单个文件。例如，在内容管理系统中上传图片集，或者在开发环境中上传代码库。传统的上传组件，如elementUI，并不直接支持文件夹上传。因此，我们需要一个更灵活、功能更全面的上传组件。
vue-simple-uploader的优点
vue-simple-uploader是一个基于simple-Uploader.js封装的Vue组件，它具有以下显著优点：
- 多类型支持：支持文件、多文件、文件夹上传。
- 拖拽上传：支持拖拽文件和文件夹到指定区域进行上传。
- 暂停与继续：用户可以暂停上传过程，并在需要时继续。
- 错误处理：具备错误检测和处理机制。
- 秒传功能：通过文件特征判断服务端是否已存在该文件，实现快速上传。
- 分块上传：支持大文件分块上传，提高上传效率和稳定性。
安装与配置
要在你的Vue项目中使用vue-simple-uploader，首先需要通过npm安装：
npm install vue-simple-uploader --save然后在你的main.js中引入并使用它：
import Vue from 'vue';
import uploader from 'vue-simple-uploader';
Vue.use(uploader);接下来，配置上传选项，这些选项可以根据你的后端接口和业务需求进行调整：
options: {
target: ' http://localhost:8080', // SpringBoot后台接收文件夹数据的接口
simultaneousUploads: 10, // 支持同时上传数量
autoStart: false, // 自动上传
panelShow: false,
allowDuplicateUploads: false, // 上传过得文件不可以再上传
testChunks: false, // 是否分片-不分片
chunkSize: '102400000000', // 块大小
// query参数是带有数据的post的额外参数，policy、OSSAccessKeyId和signature是获取到的后端签名返回，
query: (file) => {
return {
name: file.name,
key: file.key,
policy,
OSSAccessKeyId: accessId,
signature,
success_action_status: 200, // success_action_status需设置为 200
};
},
}常用方法与事件
vue-simple-uploader提供了多种方法和事件，以便于开发者根据需要进行自定义处理：
assignBrowse：将非组件按钮绑定为上传按钮。getSize：获取上传文件的总大小。progress：获取上传进度。addFile：手动添加文件到上传队列。
事件处理包括但不限于：
fileAdded：文件添加到上传队列时触发。filesAdded：多文件添加时触发。fileSuccess：文件上传成功时触发。complete：所有文件上传完成时触发。fileError：文件上传失败时触发。
代码实现
以下是vue-simple-uploader组件的一个基本使用示例，包括组件声明、事件绑定和样式配置：
<template>
<!-- 定义Uploader组件 -->
<uploader
:key="uploader_key" <!-- 使用key确保组件在数据更新时重新渲染 -->
:options="options" <!-- 绑定配置项 -->
class="uploader-example" <!-- 添加自定义类名 -->
@file-added="onFileAdded" <!-- 文件添加时触发的事件 -->
@file-success="onFileSuccess" <!-- 文件上传成功时触发的事件 -->
@upload-start="uploadStr" <!-- 开始上传时触发的事件 -->
@complete="uploadEnd" <!-- 所有文件上传完成时触发的事件 -->
@file-error="fileError" <!-- 文件上传失败时触发的事件 -->
>
<!-- 定义不支持上传的提示 -->
<uploader-unsupport></uploader-unsupport>
<!-- 定义拖拽区域 -->
<uploader-drop>
<!-- 定义上传按钮，使用Element UI的按钮组件 -->
<el-button class="uploaders-btn">
<uploader-btn class="btn" :directory="true"> <!-- 设置为目录上传 -->
<el-icon><Notification /></el-icon> <!-- 使用Element UI的图标组件 -->
<span>上传文件夹</span> <!-- 按钮文本 -->
</uploader-btn>
</el-button>
</uploader-drop>
</uploader>
</template>
<script>
import md5 from "js-md5";
export default {
data() {
return {
// 用于刷新组件的key，每次上传时更改其值以刷新组件状态
uploader_key: new Date().getTime(),
// 配置项，根据后端接口和业务需求进行配置
options: {
target: "/api/file/uploadFile", // 后端接收数据的接口
query: (file, res, status) => {
// 返回上传所需的额外参数
return {
filePath: "",
identifier: md5(file.uniqueIdentifier),
parentUserFileId: this.firstId,
sourceMenuId: this.findId,
uuid: this.uuid,
};
},
headers: {
"Blade-Auth": "bearer " + getToken(), // 认证信息
},
testChunks: false, // 不分片上传
},
};
},
created() {
// 组件创建时初始化options
this.options = {
// ... 具体配置
};
},
methods: {
// 文件添加到上传队列时的处理函数
onFileAdded(file) {
console.log("文件添加到队列：", file);
// 每次添加文件时生成新的uuid
this.uuid = new Date().getTime();
},
// 文件上传成功时的处理函数
onFileSuccess(rootFile, file, response, chunk) {
console.log("文件上传成功：", file, response);
// 根据服务器返回的response处理业务逻辑
},
// 文件上传失败时的处理函数
fileError(rootFile, file, response, chunk) {
console.error("文件上传失败：", file, response);
// 显示错误信息
this.$message.error("文件夹上传失败");
},
// 开始上传时的处理函数
uploadStr() {
this.loadingFile = true; // 设置加载状态
},
// 所有文件上传完成时的处理函数
uploadEnd() {
this.loadingFile = false; // 重置加载状态
},
},
};
</script>
<style lang="scss" scoped>
/* 自定义样式 */
.uploader-example {
.uploaders-btn {
/* 按钮样式 */
}
.btn {
/* 上传按钮内的图标和文本样式 */
}
}
</style>实现效果图
结语
vue-simple-uploader是一个功能强大、灵活易用的Vue组件，特别适合需要上传文件夹或大文件的场景。通过本文的介绍，你应该能够了解如何在你的项目中集成和使用这个组件。如果你的项目有特殊需求，不妨尝试自定义配置和事件处理，以实现更符合业务需求的上传功能。
希望本文能够帮助你更好地利用vue-simple-uploader，为你的Web应用增添强大的文件上传能力。
