抠丁客 抠丁客
项目
版本
编辑 (2024/7/10)

Uppy 状态栏

@uppy/status-bar 插件显示上传进度、速度、预估时间、前后处理信息，并允许用户控制（暂停/恢复/取消）上传。

何时使用？

当你使用 Dashboard 时，它已经默认包含。这个插件虽然是单独发布的，但主要是为 Dashboard 设计的。你仍然可以在没有 Dashboard 的情况下使用它，但它可能需要一些（CSS）调整以适应你的使用场景。

安装

  • npm

    npm install @uppy/status-bar

  • yarn

    yarn add @uppy/status-bar

  • CDN

    <!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v3.27.3/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
    import { Uppy, StatusBar } from "https://releases.transloadit.com/uppy/v3.27.3/uppy.min.mjs"
    const uppy = new Uppy()
    uppy.use(StatusBar, { target: '#status-bar' })
</script>

使用

import Uppy from "@uppy/core";
import StatusBar from "@uppy/status-bar";

import "@uppy/core/dist/style.min.css";
import "@uppy/status-bar/dist/style.min.css";

new Uppy().use(StatusBar, { target: "#status-bar" });

API

选项

id

状态栏的唯一标识符（ string，默认：'StatusBar' ）。

如果你需要添加多个状态栏实例，请使用此选项。

target

放置拖放区域的 DOM 元素、CSS 选择器或插件（ string，Element，Function，或 UIPlugin，默认：Dashboard ）。

hideAfterFinish

上传完成后隐藏状态栏（ boolean，默认：true ）。

showProgressDetails

显示剩余上传大小和预估时间（ boolean，默认：false ）

注意

false：正在上传：45%
true：正在上传：45%・剩余 43MB/共 101MB・预计还需 8 秒

hideUploadButton

隐藏上传按钮（ boolean，默认：false ）。

如果你在其他地方提供了自定义上传按钮，并使用了 uppy.upload() API，请使用此选项。

hideRetryButton

隐藏重试按钮（ boolean，默认：false ）。

如果你在其他地方提供了自定义重试按钮，并使用了 uppy.retryAll() 或 uppy.retryUpload(fileID) API，请使用此选项。

hidePauseResumeButton

隐藏暂停/恢复按钮（对于可恢复上传，如通过 tus ）（ boolean，默认：false ）。

如果你在其他地方提供了自定义取消或暂停/恢复按钮，并使用了 uppy.pauseResume(fileID) 或 uppy.removeFile(fileID) API，请使用此选项。

hideCancelButton

隐藏取消按钮（ boolean，默认：false ）。

如果你在其他地方提供了自定义取消按钮，并使用了 uppy.cancelAll() API，请使用此选项。

doneButtonHandler

状态栏将在上传/编码完成时，在暂停/恢复/取消按钮的位置渲染一个“完成”按钮（ Function，默认：null ）。

这个“完成”按钮的行为由处理器函数定义——可以用来关闭文件选择模态框或清除上传状态。Dashboard 插件（内部使用状态栏）就是这样设置的：

const doneButtonHandler = () => {
  this.uppy.reset();
  this.requestCloseModal();
};

locale

export default {
  strings: {
    // 在文件上传过程中显示在状态栏中。
    uploading: "正在上传",
    // 所有文件上传完毕后显示在状态栏中。
    complete: "完成",
    // 如果上传失败，则在状态栏中显示。
    uploadFailed: "上传失败",
    // 当上传暂停时，在状态栏中显示。
    paused: "已暂停",
    // 用于重试上传按钮的标签。
    retry: "重试",
    // 用于取消上传按钮的标签。
    cancel: "取消",
    // 用于暂停上传按钮的标签。
    pause: "暂停",
    // 用于恢复上传按钮的标签。
    resume: "恢复",
    // 当上传/编码完成后，状态栏中“完成”按钮的替换标签。
    done: "完成",
    // 当 `showProgressDetails` 设置时，显示已完全上传的文件数量。
    filesUploadedOfTotal: {
      0: "%{complete} of %{smart_count} 文件已上传",
      1: "%{complete} of %{smart_count} 文件已上传",
    },
    // 当 `showProgressDetails` 设置时，显示已上传的字节数。
    dataUploadedOfTotal: "%{complete} of %{total}",
    // 当 `showProgressDetails` 设置时，显示上传预计完成的时间。
    xTimeLeft: "%{time} 剩余",
    // 用于开始上传按钮的标签。
    uploadXFiles: {
      0: "上传 %{smart_count} 个文件",
      1: "上传 %{smart_count} 个文件",
    },
    // 当前已有上传开始，之后新增文件时，用于开始上传按钮的标签。
    uploadXNewFiles: {
      0: "新增上传 +%{smart_count} 个文件",
      1: "新增上传 +%{smart_count} 个文件",
    },
    upload: "上传",
    retryUpload: "重试上传",
    xMoreFilesAdded: {
      0: "%{smart_count} 个更多文件已添加",
      1: "%{smart_count} 个更多文件已添加",
    },
    showErrorDetails: "显示错误详情",
  },
};
在本文档中