{"id":25416311,"url":"https://github.com/lc3586/naiveupload","last_synced_at":"2025-10-31T08:32:08.194Z","repository":{"id":65333576,"uuid":"560244914","full_name":"Lc3586/NaiveUpload","owner":"Lc3586","description":"文件上传组件，基于Vue+TypeScript","archived":false,"fork":false,"pushed_at":"2025-02-16T10:47:44.000Z","size":2541,"stargazers_count":4,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-16T11:25:05.937Z","etag":null,"topics":["axios","filereader","javascript","md5-hash","typescript","vite","vite-plugin","vue","vue2","vue3","vue3-typescript","webworker"],"latest_commit_sha":null,"homepage":"https://naive-upload.lctr.top","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lc3586.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-01T03:28:21.000Z","updated_at":"2025-02-16T10:47:48.000Z","dependencies_parsed_at":"2025-02-16T11:21:22.067Z","dependency_job_id":"b8540786-adf9-452e-ab59-08aea43432c7","html_url":"https://github.com/Lc3586/NaiveUpload","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lc3586%2FNaiveUpload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lc3586%2FNaiveUpload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lc3586%2FNaiveUpload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lc3586%2FNaiveUpload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lc3586","download_url":"https://codeload.github.com/Lc3586/NaiveUpload/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239157132,"owners_count":19591260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","filereader","javascript","md5-hash","typescript","vite","vite-plugin","vue","vue2","vue3","vue3-typescript","webworker"],"created_at":"2025-02-16T16:30:59.531Z","updated_at":"2025-10-31T08:32:08.108Z","avatar_url":"https://github.com/Lc3586.png","language":"Vue","readme":"# 初级上传组件（NaiveUpload）\r\n\r\n\u003cp align=\"left\"\u003e\r\n  \u003ca href=\"https://www.npmjs.org/package/naive-upload\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/npm/v/naive-upload.svg\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://bundlephobia.com/package/naive-upload@latest\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/naive-upload?style=flat-square\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://npmcharts.com/compare/naive-upload?minimal=true\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/npm/dm/naive-upload.svg\"\u003e\r\n  \u003c/a\u003e\r\n  \u003cbr\u003e\r\n  \u003ca href=\"http://img.badgesize.io/https://unpkg.com/naive-upload/dist/naive-upload.min.js?compression=gzip\u0026label=gzip%20size:%20JS\"\u003e\r\n    \u003cimg src=\"http://img.badgesize.io/https://unpkg.com/naive-upload/dist/naive-upload.min.js?compression=gzip\u0026label=gzip%20size:%20JS\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"http://img.badgesize.io/https://unpkg.com/naive-upload/dist/style.css?compression=gzip\u0026label=gzip%20size:%20CSS\"\u003e\r\n    \u003cimg src=\"http://img.badgesize.io/https://unpkg.com/naive-upload/dist/style.css?compression=gzip\u0026label=gzip%20size:%20CSS\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://github.com/Lc3586/NaiveUpload/blob/main/LICENSE\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/badge/License-Apache 2.0-green.svg\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://996.icu/#/zh_CN\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/badge/link-996.icu-red.svg\"\u003e\r\n  \u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n## 目录（Table of Contents）\r\n\r\n- [初级上传组件（NaiveUpload）](#初级上传组件naiveupload)\r\n  - [目录（Table of Contents）](#目录table-of-contents)\r\n  - [概述 Features](#概述-features)\r\n  - [兼容浏览器 Browser Support](#兼容浏览器-browser-support)\r\n  - [安装 Installing](#安装-installing)\r\n    - [包管理器 Package manager](#包管理器-package-manager)\r\n    - [静态资源引入 CDN](#静态资源引入-cdn)\r\n  - [使用示例 Example](#使用示例-example)\r\n  - [贡献者 Contributors](#贡献者-contributors)\r\n  - [开源协议 License](#开源协议-license)\r\n\r\n## 概述 Features\r\n  - 基于TS+Vue3.0开发，同时兼容Vue2.0、Vue3.0\r\n  - 支持大文件上传、多文件上传、文件秒传、断点续传，以及文件数量校验、文件大小校验、文件类型校验。\r\n  - \u003ca href=\"http://www.lctr.online:7000\" target=\"_blank\"\u003e在线预览链接\u003c/a\u003e\r\n\r\n\r\n## 兼容浏览器 Browser Support\r\n\r\n| ![Chrome](https://cdn.jsdelivr.net/gh/alrra/browser-logos/src/chrome/chrome_48x48.png) | ![Firefox](https://cdn.jsdelivr.net/gh/alrra/browser-logos/src/firefox/firefox_48x48.png) | ![Safari](https://cdn.jsdelivr.net/gh/alrra/browser-logos/src/safari/safari_48x48.png) | ![Opera](https://cdn.jsdelivr.net/gh/alrra/browser-logos/src/opera/opera_48x48.png) | ![Edge](https://cdn.jsdelivr.net/gh/alrra/browser-logos/src/edge/edge_48x48.png) |\r\n| -------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------- |\r\n| Chrome                                                                     | Firefox                                                                          | Safari                                          | Opera                                                                                                              | Edge                                                                 |\r\n| Latest ✔                                                                   | Latest ❓                                                                         | Latest ❓                                        | Latest ❓                                                                                                           | Latest ❓                                                             |\r\n\r\n## 安装 Installing\r\n\r\n### 包管理器 Package manager\r\n\r\n使用npm（Using npm）:\r\n\r\n```bash\r\n$ npm install naive-upload\r\n```\r\n\r\n使用bower（Using bower）:\r\n\r\n```bash\r\n$ bower install naive-upload\r\n```\r\n\r\n使用yarn（Using yarn）:\r\n\r\n```bash\r\n$ yarn add naive-upload\r\n```\r\n\r\n使用pnpm（Using pnpm）:\r\n\r\n```bash\r\n$ pnpm add naive-upload\r\n```\r\n\r\n安装之后导入组件（Once the package is installed, you can import the library using `import` or `require` approach）:\r\n\r\n```js\r\nimport { NaiveUpload } from 'naive-upload';\r\nimport 'naive-upload/dist/style.css';\r\n```\r\n\r\n也可以使用默认导出全局安装插件（You can also use the default export, since the named export is just a re-export from the NaiveUploadPlugin factory）:\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport NaiveUploadPlugin from 'naive-upload';\r\nimport 'naive-upload/dist/style.css';\r\n\r\ncreateApp(App).use(NaiveUploadPlugin).mount('#app');\r\n```\r\n\r\n使用require导入（If you use `require` for importing）:\r\n\r\n```js\r\nconst NaiveUploadPlugin = require('naive-upload');\r\n```\r\n\r\n在某些环境下也可直接导入commonJS模块包（For cases where something went wrong when trying to import a module into a custom or legacy environment,\r\nyou can try importing the module package directly）:\r\n\r\n```js\r\n// 如果是vue2环境，替换链接中的vue3为vue2即可\r\nconst NaiveUploadPlugin = require('naive-upload/dist/vue3/node/naive-upload.min.cjs'); // node commonJS bundle (ES2017)\r\n```\r\n\r\n### 静态资源引入 CDN\r\n\r\n使用jsDelivr链接（支持ES5/UMD/浏览器模块）（Using jsDelivr CDN (ES5 UMD browser module)）:\r\n\r\n```html\r\n\u003c!-- 如果是vue2环境，替换链接中的vue3为vue2即可 --\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/naive-upload@latest/dist/vue3/naive-upload.min.js\"\u003e\u003c/script\u003e\r\n\u003clink href=\"https://cdn.jsdelivr.net/npm/naive-upload@latest/dist/vue3/style.css\"\u003e\r\n```\r\n\r\n使用unpkg链接（Using unpkg CDN）:\r\n\r\n```html\r\n\u003c!-- 如果是vue2环境，替换链接中的vue3为vue2即可 --\u003e\r\n\u003cscript src=\"https://unpkg.com/naive-upload@latest/dist/vue3/naive-upload.min.js\"\u003e\u003c/script\u003e\r\n\u003clink href=\"https://unpkg.com/naive-upload@latest/dist/vue3/style.css\"\u003e\r\n```\r\n\r\n## 使用示例 Example\r\n\r\n1. 极简\r\n\r\n   - 直接使用默认配置进行上传操作\r\n\r\n```html\r\n\u003ctemplate\u003e\r\n    \u003cnaive-upload v-model=\"fileIds\"\r\n                  :api-service=\"apiService\"/\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript lang=\"ts\" setup\u003e  \r\nimport {reactive} from \"vue\";\r\nimport {NaiveUpload} from 'naive-upload';\r\nimport 'naive-upload/dist/style.css';\r\nimport NaiveApiService from \"@/api/service/common/NaiveApiService\";\r\n\r\n//已经上传好的文件id集合\r\nconst fileIds = reactive([] as string[]);\r\nconst apiService = new NaiveApiService();  \r\n\u003c/script\u003e\r\n```\r\n\r\n1. 极简（只读模式）\r\n\r\n   - 直接使用默认配置进行上传操作\r\n   - 只能查看不能操作，一般用于详情等信息展示页面\r\n\r\n```html\r\n\u003ctemplate\u003e\r\n    \u003cnaive-upload v-model=\"fileIds\"\r\n                  :api-service=\"apiService\"\r\n                  :readonly=\"true\"/\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript lang=\"ts\" setup\u003e  \r\nimport {reactive} from \"vue\";\r\nimport NaiveUpload from 'naive-upload';\r\nimport 'naive-upload/dist/style.css';\r\nimport NaiveApiService from \"@/api/service/common/NaiveApiService\";\r\n\r\n//已经上传好的文件id集合\r\nconst fileIds = reactive(['fleId1', 'fleId2', 'fleId3'] as string[]);\r\nconst apiService = new NaiveApiService();  \r\n\u003c/script\u003e\r\n```\r\n\r\n3. 普通\r\n\r\n   - 使用指定的上传配置\r\n\r\n```html\r\n\u003ctemplate\u003e\r\n    \u003cnaive-upload v-model=\"fileIds\"\r\n                  :settings=\"settings\"\r\n                  :api-service=\"apiService\"/\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript lang=\"ts\" setup\u003e\r\nimport {reactive} from \"vue\";\r\nimport {NaiveUpload, Settings} from 'naive-upload';\r\nimport 'naive-upload/dist/style.css';\r\nimport NaiveApiService from \"@/api/service/common/NaiveApiService\";\r\n\r\n\r\n//已经上传好的文件id集合\r\nconst fileIds = reactive([] as string[]);\r\n//组件设置（ContentFile替换成要使用的上传配置的编码）\r\nconst settings = Settings.defaultWithConfigCode('ContentFile');\r\nconst apiService = new NaiveApiService();\r\n\u003c/script\u003e\r\n```\r\n\r\n1. 进阶（主动处理异常信息，手动控制）\r\n\r\n   - 使用指定的上传配置\r\n   - 主动处理异常信息\r\n   - 手动控制上传操作\r\n\r\n```html\r\n\u003ctemplate\u003e\r\n    \u003cnaive-upload v-model=\"fileIds\"\r\n                  :settings=\"settings\"\r\n                  :api-service=\"apiService\"\r\n                  @setOpenApi=\"setUploadApi\"\r\n                  @beforeCheck=\"handlerBeforeCheck\"\r\n                  @afterCheck=\"handlerAfterCheck\"\r\n                  @afterCheckAll=\"handlerAfterCheckAll\"\r\n                  @afterUpload=\"handlerAfterUpload\"\r\n                  @afterUploadAll=\"handlerAfterUploadAll\"\r\n                  @error=\"handlerError\"/\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript lang=\"ts\" setup\u003e\r\nimport {reactive} from \"vue\";\r\nimport {NaiveUpload, Settings} from 'naive-upload';\r\nimport 'naive-upload/dist/style.css';\r\nimport NaiveApiService from \"@/api/service/common/NaiveApiService\";\r\n\r\n\r\n//已经上传好的文件id集合\r\nconst fileIds = reactive([] as string[]);\r\n//组件设置（ContentFile替换成要使用的上传配置的编码）\r\nconst settings = Settings.defaultWithConfigCode('ContentFile');\r\nconst apiService = new NaiveApiService();\r\n\r\n/**\r\n * 组件开放的接口\r\n */\r\nlet uploadOpenApi = null as IOpenApi;\r\n\r\n/**\r\n * 获取组件开放的接口\r\n *\r\n * @param openApi 组件开放的接口\r\n */\r\nconst setUploadApi = (openApi: IOpenApi) =\u003e {\r\n  uploadOpenApi = openApi;\r\n}\r\n\r\n/**\r\n * 文件校验前执行\r\n *\r\n * @param file 文件\r\n * @return 是否处理并上传该文件\r\n */\r\nconst handlerBeforeCheck = (file: File): Promise\u003cboolean\u003e =\u003e {\r\n    return new Promise\u003cboolean\u003e(async (resolve, reject) =\u003e {\r\n        console.info(`是否处理此文件：${file.name}`);\r\n        //如果返回false则不会处理和上传此文件\r\n        console.info('处理结果：true');\r\n        resolve(true);\r\n    }\r\n}\r\n\r\n/**\r\n * 文件校验结束后执行\r\n *\r\n * @param rawFile 文件\r\n */\r\nconst handlerAfterCheck = (rawFile: RawFile) =\u003e {\r\n  // console.debug(rawFile);\r\n}\r\n\r\n/**\r\n * 文件校验全部校验结束后执行\r\n *\r\n * @param rawFiles 文件集合\r\n */\r\nconst handlerAfterCheckAll = (rawFiles: RawFile[]) =\u003e {\r\n  // console.debug(rawFiles);\r\n}\r\n\r\n/**\r\n * 文件上传后执行\r\n *\r\n * @param rawFile 文件\r\n */\r\nconst handlerAfterUpload = (rawFile: RawFile) =\u003e {\r\n  // console.debug(rawFile);\r\n}\r\n\r\n/**\r\n * 所有文件上传后执行\r\n * \u003cp\u003e此方法不会等待\u003c/p\u003e\r\n *\r\n * @param rawFiles 文件集合\r\n */\r\nconst handlerAfterUploadAll = (rawFiles: RawFile[]) =\u003e {\r\n  console.debug('已经上传好的文件id集合', Object.assign({}, fileIds));\r\n}\r\n\r\n/**\r\n * 组件异常\r\n *\r\n * @param e 异常\r\n */\r\nconst handlerError = (e: Error) =\u003e {\r\n  UploadError.consoleWrite(e);\r\n}\r\n\u003c/script\u003e\r\n```\r\n\r\n## 贡献者 Contributors\r\n\r\n\u003ca href=\"https://github.com/Lc3586/NaiveUpload/graphs/contributors\"\u003e\r\n  \u003cimg src=\"https://contrib.rocks/image?repo=Lc3586/NaiveUpload\" /\u003e\r\n\u003c/a\u003e\r\n\r\n## 开源协议 License\r\n\r\n[https://www.apache.org/licenses/LICENSE-2.0](https://www.apache.org/licenses/LICENSE-2.0)\r\n\r\n\r\n\u003cp align=\"right\"\u003e\r\n  \u003cspan\u003e—— LCTR 2022\u003c/span\u003e\r\n\u003c/p\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flc3586%2Fnaiveupload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flc3586%2Fnaiveupload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flc3586%2Fnaiveupload/lists"}