# @bytescale/upload-widget-vue 中文文档

规范地址：https://npmcn.com/package/%40bytescale/upload-widget-vue/

版本：4\.17\.0
npm 元数据更新时间：2026-04-15T10:37:00.059Z
中文译文更新时间：2026-11-08T22:08:09.423Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bytescale/upload-widget-vue
原文对照：https://npmcn.com/package/%40bytescale/upload-widget-vue/?lang=original
项目主页：https://www.bytescale.com/docs/upload-widget/vue
源码仓库：https://github.com/bytescale/bytescale-upload-widget-vue

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：36.2 kB，12 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：vue \>=3\.0\.0
- 首次发布：2023-09-17T13:21:48.087Z
- 最新版本发布：2026-04-15T10:36:59.612Z
- 近 30 天下载量：13072（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：22（近 12 个月 1 个）

## 中文简介

Vue 文件上传 UI 部件 — 轻量级 & 支持: 拖放、 多重上传、 图像裁剪、 定制 & 更多 & QQ 与 Cloud 存储 &

## 安装

```sh
npm install @bytescale/upload-widget-vue
```

也可以使用：`pnpm add @bytescale/upload-widget-vue`、`yarn add @bytescale/upload-widget-vue`、`bun add @bytescale/upload-widget-vue`

## README

# [![Bytescale Upload Widget for Vue](https://raw.githubusercontent.com/bytescale/bytescale-upload-widget-vue/main/.github/assets/bytescale-upload-widget-vue.svg)](https://www.bytescale.com/docs/upload-widget/vue)

**Vue 美丽的文件上传部件**  
(工作出箱,包含存储)

  

 [![](https://img.shields.io/badge/%40bytescale%2Fupload--widget--vue-npm-4ba0f6)](https://www.npmjs.com/package/@bytescale/upload-widget-vue)[![](https://img.shields.io/badge/build-passing-4ba0f6) ](https://github.com/bytescale/bytescale-upload-widget-vue/actions/workflows/ci.yml)[![](https://img.shields.io/badge/gzipped-33%20kb-4ba0f6) ](https://github.com/bytescale/bytescale-upload-widget-vue/)[![](https://img.shields.io/npm/dt/uploader?color=%234ba0f6)](https://www.npmjs.com/package/@bytescale/upload-widget-vue)  
 [![](https://img.shields.io/badge/TypeScript-included-4ba0f6)](https://www.npmjs.com/package/@bytescale/upload-widget-vue)[![](https://img.shields.io/npms-io/maintenance-score/uploader?color=4ba0f6) ](https://github.com/bytescale/bytescale-upload-widget-vue/actions/workflows/ci.yml)[![Twitter URL](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Fbytescale%2Fbytescale-upload-widget-vue)](https://twitter.com/intent/tweet?text=This%20was%20a%20great%20find...%0A%0Ahttps%3A%2F%2Fgithub.com%2Fbytescale%2Fbytescale-upload-widget-vue)

# 开始.. [试试代码Pen](https://codepen.io/bytescale/pen/yLpvYew?editors=0010)

[![Upload Widget Demo](https://raw.githubusercontent.com/bytescale/bytescale-upload-widget/main/.github/assets/demo.gif)](https://www.bytescale.com/docs/upload-widget)

100% 无服务器文件上传部件  
电源 [字节比例](https://www.bytescale.com/)  
  

* * *

**支持 :** 图像裁剪、视频预览、文档预览、拖放等...  
  
[**完整文档**](https://www.bytescale.com/docs/upload-widget/vue) 二. 支助 [无头 SDK](https://www.bytescale.com/docs/sdks/javascript) 二. 支助 [媒体处理 APIs](https://www.bytescale.com/docs/media-processing-apis) 二. 支助 [存储](https://www.bytescale.com/docs/storage/sources) 二. 支助 [光盘N](https://www.bytescale.com/docs/cdn)

* * *

  

## 安装

通过国家预防机制安装:

```shell
npm install @bytescale/upload-widget-vue
```

或者通过YARN:

```shell
yarn add @bytescale/upload-widget-vue
```

或者通过一个 `<script>` 标签 :

```html
<script src="https://js.bytescale.com/upload-widget-vue/v4"></script>
```

## 使用量

### 选项 1 : 文件上传按钮 - [试试代码Pen](https://codepen.io/bytescale/pen/yLpvYew?editors=1000)

使用 `openUploadModal` 帮助者 :

```html
<template>
  <button @click="uploadFile">Upload a file...</button>
</template>

<script lang="ts">
  import { openUploadModal } from "@bytescale/upload-widget-vue";
  import type { UploadWidgetConfig, UploadWidgetResult } from "@bytescale/upload-widget";
  import type { PreventableEvent } from "@bytescale/upload-widget-vue";

  // Full Configuration:
  // https://www.bytescale.com/docs/upload-widget#configuration
  const options: UploadWidgetConfig = {
    apiKey: "free", // Get API keys from: www.bytescale.com
    maxFileCount: 10
  };

  export default {
    name: "App",
    methods: {
      uploadFile(event: PreventableEvent) {
        openUploadModal({
          event,
          options,
          onComplete: (files: UploadWidgetResult[]) => {
            if (files.length === 0) {
              alert("No files selected.");
            } else {
              alert(files.map(f => f.fileUrl).join("\n"));
            }
          }
        })
      }
    }
  };
</script>
```

### 备选2) - [试试代码Pen](https://codepen.io/bytescale/pen/RwJvpKG?editors=1000)

使用 : `UploadDropzone` 组件 :

```html
<template>
  <UploadDropzone :options="options"
                  :on-complete="onFilesUploaded"
                  :on-update="onFileListChanged"
                  width="600px"
                  height="375px" />
</template>

<script lang="ts">
import { UploadDropzone } from "@bytescale/upload-widget-vue";
import type { UploadWidgetConfig, UploadWidgetResult, UploadWidgetOnUpdateEvent } from "@bytescale/upload-widget";

// Full Configuration:
// https://www.bytescale.com/docs/upload-widget#configuration
const options: UploadWidgetConfig = {
  apiKey: "free", // Get API keys from: www.bytescale.com
  maxFileCount: 10,
  showFinishButton: true
};

export default {
  name: "App",
  components: {
    UploadDropzone
  },
  data() {
    return {
      options
    };
  },
  methods: {
    onFileListChanged({ uploadedFiles, pendingFiles, failedFiles }: UploadWidgetOnUpdateEvent) {
      const uploadedFileUrls = uploadedFiles.map(x => x.fileUrl).join("\n");
      console.log(uploadedFileUrls);
    },
    onFilesUploaded(files: UploadWidgetResult[]) {
      if (files.length === 0) {
        alert("No files selected.");
      } else {
        alert(files.map(f => f.fileUrl).join("\n"));
      }
    }
  }
};
</script>
```

> **降区的特殊行为 :**
> 
> `on-complete` 只有在 `showFinishButton = true` (当用户点击"Finnish").
> 
> `on-update` 必须在 `showFinishButton = false`。 。 。 .
> 
> 默认值 : `showFinishButton = false`

## 结果

召回者收到一个 `Array<UploadWidgetResult>`数字 :

```javascript
{
  fileUrl: "https://upcdn.io/FW25...",   // URL to use when serving this file.
  filePath: "/uploads/example.jpg",      // File path (we recommend saving this to your database).

  accountId: "FW251aX",                  // Bytescale account the file was uploaded to.

  editedFile: undefined,                 // Edited file (for image crops). Same structure as below.

  originalFile: {
    fileUrl: "https://upcdn.io/FW25...", // Uploaded file URL.
    filePath: "/uploads/example.jpg",    // Uploaded file path (relative to your raw file directory).
    accountId: "FW251aX",                // Bytescale account the file was uploaded to.
    originalFileName: "example.jpg",     // Original file name from the user's machine.
    file: { ... },                       // Original DOM file object from the <input> element.
    size: 12345,                         // File size in bytes.
    lastModified: 1663410542397,         // Epoch timestamp of when the file was uploaded or updated.
    mime: "image/jpeg",                  // File MIME type.
    metadata: {
      ...                                // User-provided JSON object.
    },
    tags: [
      "tag1",                            // User-provided & auto-generated tags.
      "tag2",
      ...
    ]
  }
}
```

## QQ 配置

所有配置都是可选的(除了 `apiKey` 字段,这是需要的).

```javascript
const options = {
  apiKey: "free",                 // Get API keys from: www.bytescale.com
  locale: myCustomLocale,         // EN_US by default. (See "Localization" section below.)
  maxFileCount: 5,                // Unlimited by default (or 1 if multi: false).
  maxFileSizeBytes: 1024 ** 2,    // Unlimited by default.
  mimeTypes: ["image/*"],         // Unrestricted by default. Supports * wildcard suffix.
  multi: false,                   // False by default.
  onInit: ({                      // Exposes lifecycle methods for the component.
    close,                        // Closes the widget when called.
    reset,                        // Resets the widget when called.
    updateConfig                  // Updates the widget's config by passing a new config
  }) => {},                       // object to the method's first parameter.
  onUpdate: (event) => {          // Called each time the Upload Widget's list of files change.
    // event.pendingFiles         // Array of files that are preprocessing, uploading, or awaiting user input.
    // event.pendingFiles[0].progress // Factor (0 to 1).
    // event.pendingFiles[0].status   // "Preprocessing" | "Uploading" | "AwaitingUserInput"
    // event.failedFiles          // Array of files that failed to upload (due to network or validation reasons).
    // event.uploadedFiles        // Array of files that have been uploaded and not removed.
  },
  onPreUpload: async file => ({
    errorMessage: "Uh oh!",       // Displays this validation error to the user (if set).
    transformedFile: file         // Uploads 'transformedFile' instead of 'file' (if set).
  }),
  showFinishButton: true,         // Show/hide the "finish" button in the widget.
  showRemoveButton: true,         // Show/hide the "remove" button next to each file.
  styles: {
    breakpoints: {
      fullScreenWidth: 750,       // Full-screen mode activates when the screen is at or below this width.
      fullScreenHeight: 420       // Full-screen mode activates when the screen is at or below this height.
    },
    colors: {
      primary: "#377dff",         // Primary buttons & links
      active: "#528fff",          // Primary buttons & links (hover). Inferred if undefined.
      error: "#d23f4d",           // Error messages
      shade100: "#333",           // Standard text
      shade200: "#7a7a7a",        // Secondary button text
      shade300: "#999",           // Secondary button text (hover)
      shade400: "#a5a6a8",        // Welcome text
      shade500: "#d3d3d3",        // Modal close button
      shade600: "#dddddd",        // Border
      shade700: "#f0f0f0",        // Progress indicator background
      shade800: "#f8f8f8",        // File item background
      shade900: "#fff"            // Various (draggable crop buttons, etc.)
    },
    fontFamilies: {
      base: "arial, sans-serif"   // Base font family (comma-delimited).
    },
    fontSizes: {
      base: 16                    // Base font size (px).
    }
  },
  path: {                         // Optional: a string (full file path) or object like so:
    fileName: "Example.jpg",      // Supports path variables (e.g. {ORIGINAL_FILE_EXT}).
    folderPath: "/uploads"        // Please refer to docs for all path variables.
  },
  metadata: {
    hello: "world"                // Arbitrary JSON metadata (saved against the file).
  },
  tags: ["profile_picture"],      // Requires a Bytescale account.
  editor: {
    images: {
      allowResizeOnMove: true,    // True by default. If false, prevents cropper from resizing when moved.
      preview: true,              // True by default if cropping is enabled. Previews PDFs and videos too.
      crop: true,                 // True by default.
      cropFilePath: image => {    // Choose the file path used for JSON image crop files.
        const {filePath} = image  // In:  https://www.bytescale.com/docs/types/UploadedFile
        return `${filePath}.crop` // Out: https://www.bytescale.com/docs/types/FilePathDefinition
      },
      cropRatio: 4 / 3,           // Width / Height. Undefined enables freeform (default).
      cropShape: "rect"           // "rect" (default) or "circ".
    }
  },
}
```

### \* 本地化

默认是 [EN 美国](https://github.com/bytescale/bytescale-upload-widget/blob/main/lib/src/modules/locales/EN_US.ts)数字 :

```javascript
const myCustomLocale = {
  addAnotherFileBtn: "Add another file...",
  addAnotherImageBtn: "Add another image...",
  cancelBtn: "cancel",
  cancelBtnClicked: "cancelled",
  cancelPreviewBtn: "Cancel",
  continueBtn: "Continue",
  cropBtn: "Crop",
  customValidationFailed: "Failed to validate file.",
  doneBtn: "Done",
  fileSizeLimitPrefix: "File size limit:",
  finishBtn: "Finished",
  finishBtnIcon: true,
  imageCropNumberPrefix: "Image",
  maxFilesReachedPrefix: "Maximum number of files:",
  maxImagesReachedPrefix: "Maximum number of images:",
  orDragDropFile: "...or drag and drop a file.",
  orDragDropFileMulti: "...or drag and drop files.",
  orDragDropImage: "...or drag and drop an image.",
  orDragDropImageMulti: "...or drag and drop images.",
  processingFile: "Processing file...",
  removeBtn: "remove",
  removeBtnClicked: "removed",
  submitBtnError: "Error!",
  submitBtnLoading: "Please wait...",
  unsupportedFileType: "File type not supported.",
  uploadFileBtn: "Upload a File",
  uploadFileMultiBtn: "Upload Files",
  uploadImageBtn: "Upload an Image",
  uploadImageMultiBtn: "Upload Images",
  xOfY: "of"
}
```

# API 支持

## XQ 文件管理 APIs

字节尺提供了广泛的 [文件管理 API](https://www.bytescale.com/docs/apis)数字 :

-   **[文件列表](https://www.bytescale.com/docs/folder-api/ListFolder)**
-   **[文件删除](https://www.bytescale.com/docs/file-api/DeleteFile)**
-   **[文件复制](https://www.bytescale.com/docs/file-api/CopyFile)**
-   [还有...](https://www.bytescale.com/docs/apis)

## \* 媒体处理API(图像/视频/音频)

字节比例还提供实时 [媒体处理 APIs](https://www.bytescale.com/docs/media-processing-apis)数字 :

-   **[图像处理 API](https://www.bytescale.com/docs/image-processing-api)** (单位:千美元)[调整大小](https://www.bytescale.com/docs/image-processing-api#image-resizing-api), (中文(简体) ), [作物](https://www.bytescale.com/docs/image-processing-api#image-cropping-api), (中文(简体) ), [转换](https://www.bytescale.com/docs/image-processing-api#f), (中文(简体) ), [压缩](https://www.bytescale.com/docs/image-processing-api#image-compression-api) 打开 [水印](https://www.bytescale.com/docs/image-processing-api#Text-layering-api)(中文(简体) )
-   **[视频处理 API](https://www.bytescale.com/docs/video-processing-api)** (单位:千美元)[转码](https://www.bytescale.com/docs/video-processing-api#video-transcoding-api), (中文(简体) ), [优化](https://www.bytescale.com/docs/video-processing-api#video-compression-api), (中文(简体) ), [调整大小](https://www.bytescale.com/docs/video-processing-api#video-resizing-api) 打开 [提取元数据](https://www.bytescale.com/docs/video-processing-api#video-metadata-api)(中文(简体) )
-   **[音频处理 API](https://www.bytescale.com/docs/audio-processing-api)** (单位:千美元)[转码](https://www.bytescale.com/docs/audio-processing-api#audio-transcoding-api), (中文(简体) ), [优化](https://www.bytescale.com/docs/audio-processing-api#audio-compression-api), (中文(简体) ), [修饰](https://www.bytescale.com/docs/audio-processing-api#audio-trimming-api) 打开 [提取元数据](https://www.bytescale.com/docs/audio-processing-api#audio-metadata-api)(中文(简体) )

### 图像处理 API( 原始图像)

举个例子 [一张芝加哥的照片](https://upcdn.io/W142hJk/raw/example/city-landscape.jpg)数字 :

![](https://upcdn.io/W142hJk/raw/example/city-landscape.jpg)

```
https://upcdn.io/W142hJk/raw/example/city-landscape.jpg
```

### 图像处理 API (已转换的图像)

使用 [图像处理 API](https://www.bytescale.com/docs/image-processing-api),可以生产 [此图像](https://upcdn.io/W142hJk/image/example/city-landscape.jpg?w=900&h=600&fit=crop&f=webp&q=80&blur=4&text=WATERMARK&layer-opacity=80&blend=overlay&layer-rotate=315&font-size=100&padding=10&font-weight=900&color=ffffff&repeat=true&text=Chicago&gravity=bottom&padding-x=50&padding-bottom=20&font=/example/fonts/Lobster.ttf&color=ffe400)数字 :

![](https://upcdn.io/W142hJk/image/example/city-landscape.jpg?w=900&h=600&fit=crop&f=webp&q=80&blur=4&text=WATERMARK&layer-opacity=80&blend=overlay&layer-rotate=315&font-size=100&padding=10&font-weight=900&color=ffffff&repeat=true&text=Chicago&gravity=bottom&padding-x=50&padding-bottom=20&font=/example/fonts/Lobster.ttf&color=ffe400)

```
https://upcdn.io/W142hJk/image/example/city-landscape.jpg
  ?w=900
  &h=600
  &fit=crop
  &f=webp
  &q=80
  &blur=4
  &text=WATERMARK
  &layer-opacity=80
  &blend=overlay
  &layer-rotate=315
  &font-size=100
  &padding=10
  &font-weight=900
  &color=ffffff
  &repeat=true
  &text=Chicago
  &gravity=bottom
  &padding-x=50
  &padding-bottom=20
  &font=/example/fonts/Lobster.ttf
  &color=ffe400
```

## 认证

字节尺度支持两种认证类型:

### API 密钥

字节级上传部件使用 `apiKey` 要认证的参数 [字节比例](https://www.bytescale.com/)。 。 。 .

使用 API 密钥 认证,请求者可以访问 API 密钥可用的资源 :

-   密钥 API (`secret_***`)可以执行所有API操作(参见: [字节大小 JavaScript SDK](https://www.bytescale.com/docs/sdks/javascript)) (中文(简体) ).
    
-   公共 API 密钥( R)`public_***`)只能执行文件上传和文件下载. 文件覆盖,文件删除,所有其他破坏性操作都无法使用公共 API 密钥进行.
    

你总是要用 **公共 API 密钥** (例如:. `public_***`在你的客户端代码.

每个API密钥的读取/写取权限可以限制在文件/文件夹的子集.

### 日本西北地区

JWT是可选的.

使用 JWT , 用户可以通过 URL 直接下载私有文件, 因为认证是通过会话 cookie 默认进行的 _或者说_ 通过一个 `authorization` 如果启用了服务员,则页眉(见 `serviceWorkerScript` 目标 `AuthManager.beginAuthSession` 页:1 这允许浏览器在 `<img>`, (中文(简体) ), `<video>`和其他因素.

通过JWT,用户可以将文件上传到每个用户的文件夹. 这是因为允许在 [JWT的有效载荷](https://www.bytescale.com/docs/types/BytescaleJwt) 可以在运行时生成。 这个 [位元尺度上传部件](https://www.bytescale.com/docs/upload-widget) 内部使用 [字节大小 JavaScript SDK](https://www.bytescale.com/docs/sdks/javascript) 执行文件上传:字节标的JavaScript SDK用您的 API 处理 JWT 刷新进程,在需要时请求新的 JWT ,并将您的 JWT 包含在以后对 Bytescale API 的所有请求中.

[学习更多关于 `AuthManager` 和联合来文](https://www.bytescale.com/docs/auth)

## 乌尔比尔

这个 [字节大小 JavaScript SDK](https://github.com/bytescale/bytescale-javascript-sdk) 出口a `UrlBuilder` 来构建 URL `filePaths`数字 :

```javascript
import { UrlBuilder } from "@bytescale/sdk";
```

**建议:** 你应该永远保存 `filePaths` 转到您的 DB 而不是 `fileUrls`。 。 。 .

#### 原始文件

获取上传图像的 URL `/example.jpg` 原文如下:

```javascript
// Returns: "https://upcdn.io/1234abc/raw/example.jpg"
UrlBuilder.url({
  accountId: "1234abc",
  filePath: "/example.jpg"
});
```

#### 图像

调整上传图像的大小 `/example.jpg` 至 800x600,使用下列方法:

```javascript
// Returns: "https://upcdn.io/1234abc/image/example.jpg?w=800&h=600"
UrlBuilder.url({
  accountId: "1234abc",
  filePath: "/example.jpg",
  options: {
    transformation: "image",
    transformationParams: {
      w: 800,
      h: 600
    }
  }
});
```

[图像处理 API Docs](https://www.bytescale.com/docs/image-processing-api)

#### 视频

要将上传的视频转码 `/example.mov` 改为 HD 中的 MP4/H.264,使用下列方法:

```javascript
// Returns: "https://upcdn.io/1234abc/video/example.mov?f=mp4-h264&h=1080"
UrlBuilder.url({
  accountId: "1234abc",
  filePath: "/example.mov",
  options: {
    transformation: "video",
    transformationParams: {
      f: "mp4-h264",
      h: 1080
    }
  }
});
```

[视频处理 API Docs](https://www.bytescale.com/docs/video-processing-api)

#### 音频

要将上传的音频编码 `/example.wav` 至192kbps的AAC,使用下列方法:

```javascript
// Returns: "https://upcdn.io/1234abc/audio/example.wav?f=aac&br=192"
UrlBuilder.url({
  accountId: "1234abc",
  filePath: "/example.wav",
  options: {
    transformation: "audio",
    transformationParams: {
      f: "aac",
      br: 192
    }
  }
});
```

[音频处理 API Docs](https://www.bytescale.com/docs/audio-processing-api)

#### 档案

要提取文件 `document.docx` 从上传的 ZIP 文件 `/example.zip`数字 :

```javascript
// Returns: "https://upcdn.io/1234abc/archive/example.zip?m=extract&artifact=/document.docx"
UrlBuilder.url({
  accountId: "1234abc",
  filePath: "/example.zip",
  options: {
    transformation: "archive",
    transformationParams: {
      m: "extract"
    },
    artifact: "/document.docx"
  }
});
```

[归档处理 API Docs “ ”](https://www.bytescale.com/docs/archive-processing-api)

#### 抗病毒药

要扫描文件 `example.zip` 用于病毒,使用下列方法:

```javascript
// Returns: "https://upcdn.io/1234abc/antivirus/example.zip"
UrlBuilder.url({
  accountId: "1234abc",
  filePath: "/example.zip",
  options: {
    transformation: "antivirus"
  }
});
```

[反病毒API Docs \\'](https://www.bytescale.com/docs/antivirus-api)

## 我能用自己的存储器吗?

字节级支持AWS S3, Cloudflare R2, Google 存储器, DigitalOcean, 和字节级存储器.

**[字节级存储文档“ ”](https://www.bytescale.com/docs/storage/sources)**

## QQ 创建您的字节比例账户

字节尺度是上传,转换,并服务图像,视频,音频规模的最佳方式.

**[创建字节比例账户“ ”](https://www.bytescale.com/get-started)**

#### 完整文档

-   **[字节缩放上传部件 Docs](https://www.bytescale.com/docs/upload-widget)**
-   **[字节比例 上传部件( 反应) Docs](https://www.bytescale.com/docs/upload-widget/frameworks/react)**
-   **[字节比例 上传元件( 角度) Docs \\\\](https://www.bytescale.com/docs/upload-widget/frameworks/angular)**
-   **[字节级上传元件( Vue.js) 医生](https://www.bytescale.com/docs/upload-widget/frameworks/vue)**
-   **[字节比例 上传元件 (jQuery) Docs {}](https://www.bytescale.com/docs/upload-widget/frameworks/jquery)**

## 许可证

[麻省理工学院](https://npmcn.com/package/%40bytescale/upload-widget-vue/LICENSE)

## 常见问题

### @bytescale/upload-widget-vue 是什么？

Vue 文件上传 UI 部件 — 轻量级 & 支持: 拖放、 多重上传、 图像裁剪、 定制 & 更多 & QQ 与 Cloud 存储 &

### 如何安装 @bytescale/upload-widget-vue？

在项目目录运行 npm install @bytescale/upload-widget-vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（\>=3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bytescale/upload-widget-vue 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bytescale/upload-widget-vue 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @bytescale/upload-widget-vue 可以商用吗？

@bytescale/upload-widget-vue 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bytescale/upload-widget-vue 的下载量有多少？

根据 npm 官方下载统计，@bytescale/upload-widget-vue 在 2026/10/09 – 2026/11/07 这 30 天内被下载 13,072 次，日均约 436 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bytescale/upload-widget-vue 还在维护吗？

最新版本 4\.17\.0 发布于 2026/04/15（6 个月前）；至今共发布 22 个版本，其中过去 12 个月发布了 1 个；首次发布于 2023/09/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。