告别繁琐上传：Auto-Novel批量文件夹上传功能全攻略-优快云博客

告别繁琐上传：Auto-Novel批量文件夹上传功能全攻略

【免费下载链接】auto-novel 轻小说机翻网站，支持网络小说/文库小说/本地小说项目地址: https://gitcode.com/GitHub_Trending/au/auto-novel

您是否还在为逐本上传小说文件而烦恼？Auto-Novel的批量文件夹上传功能让轻小说管理效率提升300%。本文将深入解析这一核心功能的实现原理与使用技巧，帮助您轻松管理本地与云端小说资源。

功能定位与使用场景

批量文件夹上传是Auto-Novel项目中实现本地小说管理的核心功能，主要应用于两个场景：

本地书架管理：通过web/src/pages/bookshelf/components/BookshelfLocalAddButton.vue组件提供本地小说批量导入能力
文库小说上传：通过web/src/pages/novel/components/UploadButton.vue支持管理员批量上传文库资源

该功能支持Epub/Txt/Srt三种格式文件，单次可上传多个文件或整个文件夹，特别适合整理大量轻小说资源的用户。

核心实现组件解析

DropZone拖拽上传组件

系统采用现代化的拖拽上传机制，核心实现位于web/src/components/overlay/DropZone.vue。该组件创建全屏拖拽区域，当用户将文件拖入浏览器时触发上传流程：

<template>
  <teleport to="body">
    <div class="drop-zone-wrap" v-show="showDropZone">
      <n-upload
        v-bind="$attrs"
        :show-file-list="false"
        trigger-style="height:100%"
        class="drop-zone"
        @dragleave="handleDragLeave"
        @drop="handleDrop"
      >
        <n-upload-dragger class="drop-zone-placeholder">
          <n-icon class="drop-icon" :component="DriveFolderUploadOutlined" />
          <div><slot></slot></div>
        </n-upload-dragger>
      </n-upload>
    </div>
  </teleport>
</template>

组件使用fixed定位覆盖全屏，半透明黑色背景（rgba(0, 0, 0, 0.7)）提供清晰的操作反馈，Material Design的DriveFolderUploadOutlined图标直观指示功能用途。

本地书架上传实现

本地书架批量上传功能在web/src/pages/bookshelf/components/BookshelfLocalAddButton.vue中实现，核心代码如下：

<template>
  <n-upload
    :show-file-list="false"
    accept=".txt,.epub,.srt"
    multiple
    directory-dnd
    :custom-request="customRequest"
    @before-upload="beforeUpload"
    @finish="onFinish"
  >
    <n-tooltip trigger="hover">
      <template #trigger>
        <c-button label="添加" :icon="PlusOutlined" />
      </template>
      支持拖拽上传Epub/Txt/Srt文件
      <br />
      百度/有道/GPT支持韩语/英语小说
    </n-tooltip>
  </n-upload>
  <DropZone
    @finish="onFinish"
    accept=".txt,.epub,.srt"
    multiple
    directory-dnd
    :custom-request="customRequest"
    @before-upload="beforeUpload"
  >
    拖拽文件到这里上传
  </DropZone>
</template>

该实现通过directory-dnd属性启用文件夹上传能力，同时配置multiple支持多文件选择。上传前验证逻辑（beforeUpload）确保文件格式和大小符合要求：

const beforeUpload = ({ file }: { file: UploadFileInfo }) => {
  if (
    !(
      file.name.endsWith('.txt') ||
      file.name.endsWith('.epub') ||
      file.name.endsWith('.srt')
    )
  ) {
    message.error(`上传失败:文件类型不允许\n文件名： ${file.name}`);
    return false;
  }
  if (file.file?.size && file.file.size > 1024 * 1024 * 100) {
    message.error(`上传失败:文件大小不能超过100MB\n文件名: ${file.name}`);
    return false;
  }
};

文库小说上传实现

管理员专用的文库小说上传功能位于web/src/pages/novel/components/UploadButton.vue，提供更严格的文件验证和权限控制：

async function beforeUpload({ file }: { file: UploadFileInfo }) {
  if (!whoami.value.isSignedIn) {
    message.info('请先登录');
    return false;
  }
  if (
    ['jp', 'zh', 'zh-jp', 'jp-zh'].some((prefix) =>
      file.file!.name.startsWith(prefix),
    )
  ) {
    message.error('不要上传本网站上生成的机翻文件');
    return false;
  }
  if (file.file.size > 1024 * 1024 * 40) {
    message.error('文件大小不能超过40MB');
    return false;
  }
  
  // 语言检测逻辑
  const charsCount = RegexUtil.countLanguageCharacters(content);
  const p = (charsCount.jp + charsCount.ko) / charsCount.total;
  if (p < 0.33 && !props.allowZh) {
    message.error('疑似中文小说，文库不允许上传');
    return false;
  }
}

该组件还实现了上传须知模态框，确保管理员了解上传规范：

<c-modal
  title="上传须知"
  v-model:show="showRuleModal"
  @after-leave="uploadRef?.openOpenFileDialog()"
>
  <n-p>在上传小说之前，请务必遵守以下规则。</n-p>
  <n-ul>
    <n-li>日文章节上传前请确定里面有文本，单卷书压缩包超40MB里面大概率只有扫图无文本，这种是无法翻译的。</n-li>
    <n-li>EPUB文件大小超过40MB无法上传，请压缩里面的图片。</n-li>
    <n-li>不要上传已存在的分卷，现存的分卷有问题请联系管理员。</n-li>
    <n-li>分卷文件名应当只包含日文标题、卷数、分卷日文标题。</n-li>
  </n-ul>
</c-modal>

操作流程可视化

普通用户上传流程

访问本地书架页面，点击"添加"按钮
选择多个文件或整个文件夹
系统自动验证文件格式和大小
上传完成后在本地书架显示

本地书架添加按钮位置示意图

管理员上传流程

进入文库小说详情页，点击"上传"按钮
阅读并确认上传须知
选择文件并等待语言检测完成
监控上传进度直至完成

文库小说上传须知对话框

常见问题解决

上传失败的常见原因

文件格式错误：仅支持.txt/.epub/.srt格式
文件过大：普通用户限制100MB，管理员限制40MB
权限不足：文库上传需要管理员权限
网络问题：大文件上传建议使用稳定网络

批量上传性能优化

对于超过10个文件的批量上传，建议：

先压缩为ZIP文件（系统支持自动解压）
避免同时进行翻译操作
使用Chrome浏览器获得最佳性能

功能扩展建议

根据web/src/pages/workspace/Toolbox.vue中的上传组件设计，未来可能扩展：

支持ZIP批量解压上传
增加文件自动分类功能
实现上传任务后台处理

通过本文介绍的批量文件夹上传功能，您可以轻松管理大量轻小说资源，为后续翻译和阅读体验打下基础。更多高级功能请参考README.md和项目源码。

【免费下载链接】auto-novel 轻小说机翻网站，支持网络小说/文库小说/本地小说项目地址: https://gitcode.com/GitHub_Trending/au/auto-novel

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考