[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8809":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":17,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":16,"starSnapshotCount":16,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},8809,"vue-uploader","simple-uploader\u002Fvue-uploader","simple-uploader","A Vue.js upload component powered by simple-uploader.js","",null,"Vue",2119,385,17,51,0,1,3,29.76,"MIT License",false,"master",true,[],"2026-06-12 02:01:58","# vue-simple-uploader  [![NPM Version][npm-image]][npm-url] [![NPM Downloads][downloads-image]][downloads-url] [![juejin likes][juejin-image]](juejin-url)\n\n> A Vue.js upload component powered by [simple-uploader.js](https:\u002F\u002Fgithub.com\u002Fsimple-uploader\u002FUploader)\n\n[With vue 3](https:\u002F\u002Fgithub.com\u002Fsimple-uploader\u002Fvue-uploader\u002Ftree\u002Fvue3)\n\n![example](https:\u002F\u002Fgithub.com\u002Fsimple-uploader\u002Fvue-uploader\u002Fblob\u002Fmaster\u002Fexample\u002Fsimple-uploader.gif)\n\n![QQ](https:\u002F\u002Fgithub.com\u002Fsimple-uploader\u002FUploader\u002Fblob\u002Fdevelop\u002Fassets\u002Fsimple-uploader-QQ-3.png?raw=true)\n\n[中文](.\u002FREADME_zh-CN.md)\n\n## Features\n\n* Treat Folder and File as `File`\n* Pause\u002FResume upload\n* Recover upload\n* Error handling\n* Drag and Drop with folder reader\n* Custom upload buttons\n* Folder Upload\n* Queue management\n* File validation\n* Upload progress\n* Time remaining\n* Chunk uploads\n\n## Install\n\n``` bash\nnpm install vue-simple-uploader --save\n```\n\n## Notes\n\n- https:\u002F\u002Fwww.cnblogs.com\u002Fxiahj\u002Fp\u002Fvue-simple-uploader.html\n- https:\u002F\u002Fgithub.com\u002FLuoLiangDSGA\u002Fspring-learning\u002Ftree\u002Fmaster\u002Fboot-uploader\n- http:\u002F\u002Fwww.smarthu.club\n\n## Usage\n\n### init\n\n``` js\nimport Vue from 'vue'\nimport uploader from 'vue-simple-uploader'\nimport App from '.\u002FApp.vue'\n\nVue.use(uploader)\n\n\u002F* eslint-disable no-new *\u002F\nnew Vue({\n  render(createElement) {\n    return createElement(App)\n  }\n}).$mount('#app')\n```\n\n### App.vue\n\n``` vue\n\u003Ctemplate>\n  \u003Cuploader :options=\"options\" class=\"uploader-example\">\n    \u003Cuploader-unsupport>\u003C\u002Fuploader-unsupport>\n    \u003Cuploader-drop>\n      \u003Cp>Drop files here to upload or\u003C\u002Fp>\n      \u003Cuploader-btn>select files\u003C\u002Fuploader-btn>\n      \u003Cuploader-btn :attrs=\"attrs\">select images\u003C\u002Fuploader-btn>\n      \u003Cuploader-btn :directory=\"true\">select folder\u003C\u002Fuploader-btn>\n    \u003C\u002Fuploader-drop>\n    \u003Cuploader-list>\u003C\u002Fuploader-list>\n  \u003C\u002Fuploader>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  export default {\n    data () {\n      return {\n        options: {\n          \u002F\u002F https:\u002F\u002Fgithub.com\u002Fsimple-uploader\u002FUploader\u002Ftree\u002Fdevelop\u002Fsamples\u002FNode.js\n          target: '\u002F\u002Flocalhost:3000\u002Fupload',\n          testChunks: false\n        },\n        attrs: {\n          accept: 'image\u002F*'\n        }\n      }\n    }\n  }\n\u003C\u002Fscript>\n\n\u003Cstyle>\n  .uploader-example {\n    width: 880px;\n    padding: 15px;\n    margin: 40px auto 0;\n    font-size: 12px;\n    box-shadow: 0 0 10px rgba(0, 0, 0, .4);\n  }\n  .uploader-example .uploader-btn {\n    margin-right: 4px;\n  }\n  .uploader-example .uploader-list {\n    max-height: 440px;\n    overflow: auto;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n\u003C\u002Fstyle>\n```\n\n## Components\n\n### Uploader\n\nRoot component.\n\n#### Props\n\n* `options {Object}`\n\n  See [simple-uploader.js options](https:\u002F\u002Fgithub.com\u002Fsimple-uploader\u002FUploader#configuration).\n\n  Besides, some other options are avaliable too:\n\n  - `parseTimeRemaining(timeRemaining, parsedTimeRemaining) {Function}`\n\n    this function option to format the current file's time remaining value(seconds, number), you can return your language time remaining text, params:\n\n    - `timeRemaining{Number}`, time remaining seconds\n\n    - `parsedTimeRemaining{String}`, default shown time remaining text, you can use it like this:\n\n      ```js\n      parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {\n        return parsedTimeRemaining\n          .replace(\u002F\\syears?\u002F, '年')\n          .replace(\u002F\\days?\u002F, '天')\n          .replace(\u002F\\shours?\u002F, '小时')\n          .replace(\u002F\\sminutes?\u002F, '分钟')\n          .replace(\u002F\\sseconds?\u002F, '秒')\n      }\n      ```\n  - `categoryMap {Object}`\n\n    File category map, default:\n\n    ```js\n    {\n      image: ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp'],\n      video: ['mp4', 'm3u8', 'rmvb', 'avi', 'swf', '3gp', 'mkv', 'flv'],\n      audio: ['mp3', 'wav', 'wma', 'ogg', 'aac', 'flac'],\n      document: ['doc', 'txt', 'docx', 'pages', 'epub', 'pdf', 'numbers', 'csv', 'xls', 'xlsx', 'keynote', 'ppt', 'pptx']\n    }\n    ```\n\n* `autoStart {Boolean}`\n\n  Default `true`, Whether the file will be start uploading after it is added.\n\n* `fileStatusText {Object}`\n\n  Default:\n  ```js\n  {\n    success: 'success',\n    error: 'error',\n    uploading: 'uploading',\n    paused: 'paused',\n    waiting: 'waiting'\n  }\n  ```\n  An object map for file status text.\n\n  After 0.6.0, `fileStatusText` can be a function with params `(status, response = null)`, you can control the status text more flexible:\n\n  ```js\n  fileStatusText(status, response) {\n    const statusTextMap = {\n      uploading: 'uploading',\n      paused: 'paused',\n      waiting: 'waiting'\n    }\n    if (status === 'success' || status === 'error') {\n      \u002F\u002F only use response when status is success or error\n\n      \u002F\u002F eg:\n      \u002F\u002F return response data ?\n      return response.data\n    } else {\n      return statusTextMap[status]\n    }\n  }\n  ```\n\n#### Events\n\nSee [simple-uploader.js uploader\u002Fevents](https:\u002F\u002Fgithub.com\u002Fsimple-uploader\u002FUploader#events)\n\n**Note:**\n\n* All events name will be transformed by [lodash.kebabCase](https:\u002F\u002Fgithub.com\u002Flodash\u002Flodash\u002Fblob\u002Fmaster\u002FkebabCase.js), eg: `fileSuccess` will be transformed to `file-success`\n\n* `catchAll` event will not be emited.\n\n* `file-added(file)`, file added event, this event is used for file validation. To reject this file you should set `file.ignored = true`.\n\n* `files-added(files, fileList)`, files added event, this event is used for files validation. To reject these files you should set `files.ignored = true` or `fileList.ignored = true`.\n\n#### Scoped Slots\n\n* `files {Array}`\n\n  An array of files (no folders).\n\n* `fileList {Array}`\n\n  An array of files and folders.\n\n* `started`\n\n  Started uploading or not.\n\n#### Get `Uploader` instance\n\nYou can get it like this:\n\n```js\nconst uploaderInstance = this.$refs.uploader.uploader\n\u002F\u002F now you can call all uploader methods\n\u002F\u002F https:\u002F\u002Fgithub.com\u002Fsimple-uploader\u002FUploader#methods\nuploaderInstance.cancel()\n```\n\n### UploaderBtn\n\nSelect files button.\n\n#### Props\n\n* `directory {Boolean}`\n\n  Default `false`, Support selecting Folder\n\n* `single {Boolean}`\n\n  Default `false`, To prevent multiple file uploads if it is `true`.\n\n* `attrs {Object}`\n\n  Default `{}`, Pass object to set custom attributes on input element.\n\n### UploaderDrop\n\nDroped files area.\n\n### UploaderList\n\nAn array of `Uploader.File` file(folder) objects added by the user, but it treated Folder as `Uploader.File` Object.\n\n#### Scoped Slots\n\n* `fileList {Array}`\n\n  An array of files and folders.\n\n### UploaderFiles\n\nAn array of `Uploader.File` file objects added by the user.\n\n#### Scoped Slots\n\n* `files {Array}`\n\n  An array of files (no folders).\n\n### UploaderUnsupport\n\nIt will be shown if the current browser do not support HTML5 File API.\n\n### UploaderFile\n\nFile item component.\n\n#### Props\n\n* `file {Uploader.File}`\n\n  `Uploader.File` instance.\n\n* `list {Boolean}`\n\n  It should be `true` if it is puted in `UploaderList`\n\n#### Scoped Slots\n\n* `file {Uploader.File}`\n\n  `Uploader.File` instance.\n\n* `list {Boolean}`\n\n  In `UploaderList` component or not.\n\n* `status {String}`\n\n  Current status, the values is one of `success`, `error`, `uploading`, `paused`, `waiting`\n\n* `paused {Boolean}`\n\n  Indicated if the file is paused.\n\n* `error {Boolean}`\n\n  Indicated if the file has encountered an error.\n\n* `averageSpeed {Number}`\n\n  Average upload speed, bytes per second.\n\n* `formatedAverageSpeed {String}`\n\n  Formated average upload speed, eg: `3 KB \u002F S`\n\n* `currentSpeed {Number}`\n\n  Current upload speed, bytes per second.\n\n* `isComplete {Boolean}`\n\n  Indicated whether the file has completed uploading and received a server response.\n\n* `isUploading {Boolean}`\n\n  Indicated whether file chunks is uploading.\n\n* `size {Number}`\n\n  Size in bytes of the file.\n\n* `formatedSize {Number}`\n\n  Formated file size, eg: `10 KB`.\n\n* `uploadedSize {Number}`\n\n  Size uploaded in bytes.\n\n* `progress {Number}`\n\n  A number between 0 and 1 indicating the current upload progress of the file.\n\n* `progressStyle {String}`\n\n  The file progress element's transform style, eg: `{transform: '-50%'}`.\n\n* `progressingClass {String}`\n\n  The value will be `uploader-file-progressing` if the file is uploading.\n\n* `timeRemaining {Number}`\n\n  Remaining time to finish upload file in seconds.\n\n* `formatedTimeRemaining {String}`\n\n  Formated remaining time, eg: `3 miniutes`.\n\n* `type {String}`\n\n  File type.\n\n* `extension {String}`\n\n  File extension in lowercase.\n\n* `fileCategory {String}`\n\n  File category, one of `folder`, `document`, `video`, `audio`, `image`, `unknown`.\n\n## Development\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n```\n\n[npm-image]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-simple-uploader.svg?style=flat\n[npm-url]: https:\u002F\u002Fnpmjs.org\u002Fpackage\u002Fvue-simple-uploader\n[downloads-image]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fvue-simple-uploader.svg?style=flat\n[downloads-url]: https:\u002F\u002Fnpmjs.org\u002Fpackage\u002Fvue-simple-uploader\n[juejin-image]: https:\u002F\u002Fbadge.juejin.im\u002Fentry\u002F599dad0ff265da248b04d7b8\u002Flikes.svg?style=flat\n[juejin-url]: https:\u002F\u002Fjuejin.im\u002Fentry\u002F599dad0ff265da248b04d7b8\u002Fdetail\n","vue-simple-uploader 是一个基于 simple-uploader.js 的 Vue.js 文件上传组件。它支持文件夹和单个文件的拖拽上传、暂停\u002F恢复上传、断点续传等功能，并且具备错误处理、自定义上传按钮、队列管理和文件验证等特性，同时提供上传进度和剩余时间显示。该组件适用于需要高效稳定文件上传功能的各种Web应用场合，如内容管理系统、在线教育平台或任何需要用户上传文件的网站。使用简单，通过 npm 安装后即可在 Vue 项目中快速集成。",2,"2026-06-11 03:19:51","top_language"]