# general-upload

Latest version **1.1.7** (published 2025-07-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install general-upload
pnpm add general-upload
yarn add general-upload
bun add general-upload
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.7 |
| Published | 2025-07-23 |
| First published | 2021-07-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | chendeli419287484@qq.com |
| Maintainers | alan1034 |
| Keywords | upload, general, general-upload, vue2, element-ui, el-form, Multi component |

## Links

- npm: https://www.npmjs.com/package/general-upload
- Repository: https://github.com/Alan1034/GeneralUpload
- Homepage: https://github.com/Alan1034/GeneralUpload#readme
- Issues: https://github.com/Alan1034/GeneralUpload/issues
- npm.io page: https://npm.io/package/general-upload

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.7 (latest) — 2025-07-23
- 1.1.6 — 2024-10-30
- 1.1.5 — 2024-10-29
- 1.1.4 — 2024-10-09
- 2.0.1 — 2024-10-08
- 2.0.0 — 2024-10-08
- 1.1.3 — 2024-03-13
- 1.1.2 — 2024-02-23
- 1.1.1 — 2024-02-22
- 1.1.0 — 2023-12-11
- 1.0.13 — 2021-10-14
- 1.0.12 — 2021-09-07
- 1.0.11 — 2021-08-23
- 1.0.10 — 2021-08-23
- 1.0.9 — 2021-08-23
- … 9 more at https://npm.io/package/general-upload/versions

## README

<!-- @format -->

# GeneralUpload

##一个图片上传组件，有缩略图，vue2请使用@1版本，Vue3请使用@2版本<br/>
示例：

      <GeneralUpload
       :incomeForm="baseForm"
       prop="bsImage"
       :uploadFunction="uploadFunction"
      />

![img](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202108231135353.png)

数据示例:

baseForm: 传入一个 el-form 绑定的 Object

prompt:上传组件上显示的文字

prop:绑定的 Object 中存放图片的字段

uploadFunction:上传图片的函数，会返回一个 file 和传入的 prop，如果返回 false 或者返回 Promise 且被 reject,则停止上传;
uploadFunction(file, prop)

其他 Upload 组件的 Attribute(https://element.eleme.io/#/zh-CN/component/upload) :选传

# FilesUpload

##一个多文件上传组件<br/>
示例：

         <FilesUpload
          prop="patternPath"
          :limit="3"
          :uploadFunction="uploadFunction"
          :removeFunction="removeFunction"
          :fileList="fileList"
        />
        
         <FilesUpload
          onlyList 
          :previewFunction="handlePreview" 
          :fileList="fileList"
        />
        
          <FilesUpload :uploadFunction="uploadFunction" :removeFunction="removeFunction" :previewFunction="previewFunction"
            pure multiple :limit="5" accept="image/png,application/pdf,image/jpeg" :fileList="fileList">
            <template v-slot:trigger>
              <el-button class="upload-button">选择文件</el-button>
            </template>
            <template v-slot:tip>
              <span class="slot-tip">
                支持上传不超过5个文档，可支持上传pdf、jpg、png等文件格式
              </span>
            </template>
          </FilesUpload>

![img](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202108231137554.png)

数据示例:

onlyList:是否纯展示

pure:不展示点击上传按钮，可以改为slot传入

prompt:上传按钮上显示的文字

limit 和其他 Upload 组件的 Attribute(https://element.eleme.io/#/zh-CN/component/upload):选传

uploadFunction:上传图片的函数，会返回一个 file 和传入的 prop，如果返回 false 或者返回 Promise 且被 reject,则停止上传;
uploadFunction(file)

removeFunction:删除图片后触发的函数，一般用来修改 fileList，会返回一个 file 和 fileList 和传入的 prop;
removeFunction(file, fileList)

previewFunction:点击附件后触发的函数，一般用来制作点击后预览/下载文件
previewFunction(file)

handleExceed:当超出限制时触发的函数
handleExceed(file)

fileList:存放在 data 中的文件列表;
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]

# PicturesUpload

##一个多图片上传组件<br/>
示例:

        <PicturesUpload
          prop="itemImages"
          :uploadFunction="uploadFunction"
          :removeFunction="removeFunction"
          :fileList="fileList"
          :limit="5"
          accept="image/png,image/bmp,image/jpeg"
        />

![img](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202108231137062.png)

数据示例:

prop:绑定的 Object 中存放图片的字段

prompt:上传组件上显示的文字

limit 和其他 Upload 组件的 Attribute(https://element.eleme.io/#/zh-CN/component/upload):选传

uploadFunction:上传图片的函数，会返回一个 file 和传入的 prop，如果返回 false 或者返回 Promise 且被 reject,则停止上传;
uploadFunction(file)

removeFunction:删除图片后触发的函数，一般用来修改 fileList，会返回一个 file 和 fileList 和传入的 prop;
removeFunction(file, fileList)

previewFunction:点击附件后触发的函数，一般用来制作点击后下载文件
previewFunction(file)

exceedFunction:当超出限制时触发的函数
exceedFunction(file)

fileList:存放在 data 中的文件列表;
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]

accept:https://www.iana.org/assignments/media-types/media-types.xhtml#image

安装：npm i general-upload<br/>
install: npm i general-upload

使用：import { GeneralUpload, FilesUpload,PicturesUpload } from "general-upload";
vite：import 'general-upload/style'
webpack4：import 'general-upload/dist/style.css'

---
_Source: https://npm.io/package/general-upload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._