\n select files\n select images\n select folder\n \n \n \n\n\n\n\n\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://github.com/simple-uploader/Uploader#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(/\\syears?/, '年')\n .replace(/\\days?/, '天')\n .replace(/\\shours?/, '小时')\n .replace(/\\sminutes?/, '分钟')\n .replace(/\\sseconds?/, '秒')\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 // only use response when status is success or error\n \n // eg:\n // 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/events](https://github.com/simple-uploader/Uploader#events)\n\n**Note:**\n\n* All events name will be transformed by [lodash.kebabCase](https://github.com/lodash/lodash/blob/master/kebabCase.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\n// Composition API\nconst uploader = ref(null)\n// there will be an uploader attribute on the uploader component, which points to the Uploader instance\nconst uploaderInstance = uploader.value.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#methods\nuploaderInstance.cancel()\n\n//Options API\nconst uploaderInstance = this.$refs.uploader.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#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 / 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\n[npm-image]: https://img.shields.io/npm/v/vue-simple-uploader.svg?style=flat\n[npm-url]: https://npmjs.org/package/vue-simple-uploader\n[downloads-image]: https://img.shields.io/npm/dm/vue-simple-uploader.svg?style=flat\n[downloads-url]: https://npmjs.org/package/vue-simple-uploader\n[juejin-image]: https://img.shields.io/badge/Jue%20Jin-446Likes-blue.svg\n[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail\n\n","readmeFilename":"README.md","gitHead":"084d17db8323d09e04f7a6b728efcb9f09055432","_id":"vue-simple-uploader@1.0.0-beta.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Wk6gCoA+my1xaS5rskVusItxCJ91zeYadM32FcgIIjAjEpgq/X4qGt+ANeGFrHdHqieUE10eoaBtUa8JQR/KuQ==","shasum":"f6f1563abff5339959cc2ba26175b45e007c75c5","tarball":"http://tools.bpmhome.cn:8082/nexus/repository/npm-lc/vue-simple-uploader/-/vue-simple-uploader-1.0.0-beta.0.tgz","fileCount":28,"unpackedSize":427296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1QnYCRA9TVsSAnZWagAAslwP/iqYoyRp1X1/fNst0fB/\ny+wBN7c+G32BmLj7VoUcVRq57UJMqUlvGho3DQuhPdsQzYESRacAMt1xSbX9\nIL3YwMtpjBR1ZdLsu45l1WUhgSPsg/YYjOrCEHijkyMEWiyrGJwxu+0A6J1F\n3j6W12r20g9jPG7rjxGDgK9SmqIQjlM+Jy0Nda32jETCXVVTGt8Z+iTeiE1s\ngdRHM14atTtFz0U8sY6L57xMAHG6Hhgb2Zvd31JZFjYF0R2LSYnEkjJIzTRI\nIWXDfY2JA5F5kwG7KdhH1ZzqJNaxv6XJP+myFrJ5gKyMN55zGlb0LcBRnFYc\nVqFlqrK/fnXf5WReLgdAExdv3aejV30CN6BAo+P5elmcsLlp67xyECkNLDzH\nQzcHqrFTXtzAcoFZhJOfzCIS3Y4TFNh6r06Ec86uvxzV3/5JEJqZ1kUo0eTe\n/p0mmu7cOzPPWVXxmgayv9nZsxFm3M+cE3Sj5c8XALkKbNnE6Ftr3Aqh1a0U\nxz6NRNB+uuFIq88RE4Xoq4caWxdUiQMjUuVZiXsO68FGVopMufrAG6FpFAUM\nfnySDpnjzNpeQ+jB9UqYKcMwQqqrB8cQLUmknK3FVDYxbzwqoEfG7JqrkcbB\nyemBp2UDB+ytVd5I46oMiM6zqFMbbfVjtkwzqddjqL7cPjWMdykp2RE9Blg/\n0LZt\r\n=RLvX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICdpO0ejM7k0Y2Q2EZRuT9Qo6iverpcUh0s4XkzcapmNAiEA2h7eUIj6+LFQdTqQg698shBHtj/VLT82sP8J76ArnCI="}]},"_npmUser":{"name":"dolymood","email":"dolymood@gmail.com"},"directories":{},"maintainers":[{"name":"dolymood","email":"dolymood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-simple-uploader_1.0.0-beta.0_1641351639884_0.005302036079495309"},"_hasShrinkwrap":false},"1.0.0-beta.1":{"name":"vue-simple-uploader","version":"1.0.0-beta.1","description":"A Vue.js upload component powered by simple-uploader.js","main":"dist/vue-simple-uploader.umd.js","module":"dist/vue-simple-uploader.es.js","repository":{"type":"git","url":"git+https://github.com/simple-uploader/vue-uploader.git"},"bugs":{"url":"https://github.com/simple-uploader/vue-uploader/issues"},"homepage":"https://github.com/simple-uploader/vue-uploader","author":{"name":"dolymood@gmail.com"},"license":"MIT","scripts":{"dev":"vite --force","build":"vite build","lint":"eslint --ext .js,.vue src test/unit/specs"},"dependencies":{"simple-uploader.js":"^0.6.0"},"peerDependencies":{"vue":">=2.2"},"devDependencies":{"@vitejs/plugin-vue":"^1.2.4","@vue/compiler-sfc":"^3.1.4","autoprefixer":"^7.1.2","babel-core":"^6.22.1","babel-eslint":"^7.1.1","babel-loader":"^7.1.1","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-transform-runtime":"^6.22.0","babel-preset-env":"^1.3.2","babel-preset-stage-2":"^6.22.0","babel-register":"^6.22.0","chalk":"^2.0.1","connect-history-api-fallback":"^1.3.0","copy-webpack-plugin":"^4.0.1","css-loader":"^0.28.0","cssnano":"^3.10.0","eslint":"^4.18.2","eslint-config-standard":"^6.2.1","eslint-friendly-formatter":"^3.0.0","eslint-loader":"^1.7.1","eslint-plugin-html":"^3.0.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.14.1","html-webpack-plugin":"^2.28.0","http-proxy-middleware":"^0.17.3","mitt":"^3.0.0","opn":"^5.1.0","ora":"^1.2.0","rimraf":"^2.6.0","semver":"^5.3.0","shelljs":"^0.7.6","url-loader":"^0.5.8","vite":"^2.4.1","vue":"^3.1.4","vue-loader":"^16.3.0"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","not ie <= 8","Android >= 4.0","iOS >= 8"],"readme":"# 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://github.com/simple-uploader/Uploader)\n\n\n\n\n\n[中文](./README_zh-CN.md)\n\n## Features\n\n* Treat Folder and File as `File`\n* Pause/Resume 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@next --save\n```\n\n## Notes\n\n- https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html\n- https://github.com/LuoLiangDSGA/spring-learning/tree/master/boot-uploader\n- http://www.smarthu.club\n\n## Usage\n\n### init\n\n``` js\nimport { createApp } from 'vue'\nimport uploader from 'vue-simple-uploader'\nimport 'vue-simple-uploader/dist/style.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(uploader)\napp.mount('#app')\n```\n\n### App.vue\n\n``` vue\n\n \n \n \n
Drop files here to upload or
\n select files\n select images\n select folder\n \n \n \n\n\n\n\n\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://github.com/simple-uploader/Uploader#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(/\\syears?/, '年')\n .replace(/\\days?/, '天')\n .replace(/\\shours?/, '小时')\n .replace(/\\sminutes?/, '分钟')\n .replace(/\\sseconds?/, '秒')\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 // only use response when status is success or error\n \n // eg:\n // 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/events](https://github.com/simple-uploader/Uploader#events)\n\n**Note:**\n\n* All events name will be transformed by [lodash.kebabCase](https://github.com/lodash/lodash/blob/master/kebabCase.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\n// Composition API\nconst uploader = ref(null)\n// there will be an uploader attribute on the uploader component, which points to the Uploader instance\nconst uploaderInstance = uploader.value.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#methods\nuploaderInstance.cancel()\n\n//Options API\nconst uploaderInstance = this.$refs.uploader.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#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 / 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\n[npm-image]: https://img.shields.io/npm/v/vue-simple-uploader.svg?style=flat\n[npm-url]: https://npmjs.org/package/vue-simple-uploader\n[downloads-image]: https://img.shields.io/npm/dm/vue-simple-uploader.svg?style=flat\n[downloads-url]: https://npmjs.org/package/vue-simple-uploader\n[juejin-image]: https://img.shields.io/badge/Jue%20Jin-446Likes-blue.svg\n[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail\n\n","readmeFilename":"README.md","gitHead":"5552c48a03b39b05be4d533b859b652d91b2bdeb","_id":"vue-simple-uploader@1.0.0-beta.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-jPtVEhLgRzqt2dkRZfFfjxOJUQZpwlpWtflTdCcoFafEC46SkjTQXqWcKTgE2FTzeh1EztXB3zAWOFdfG5z+AQ==","shasum":"66305bd95578e9a9e339cef0829eb05153cea9ee","tarball":"http://tools.bpmhome.cn:8082/nexus/repository/npm-lc/vue-simple-uploader/-/vue-simple-uploader-1.0.0-beta.1.tgz","fileCount":28,"unpackedSize":378952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1UfJCRA9TVsSAnZWagAAMLYQAIchwV5Slg9iAGtfGywI\nFZkER0Mi/JSzuukwCN937RhDQ48XX2A1nDAhY/Dsy8b5VTAbGYoNdjmMZpkM\nbni46IGR6XM5evI8dlBj+0z4TTOqG62D6okGGVk3Yd75FMh8kbDDN+ds/4oE\n/FjIXjb5r4o8vHSjCYlebcsFpauwTzb9Px4JT56rYVyviqRfrQhndULoR6b9\nSVYJcTdsYxT/s3f9GVaAanmKJt037tkJDQP+ntK1sUhQmnv+u+ORlu+O9Gp+\nEHTWudpcUm4WT3U4+4SEPvYlGHeRF+zb1WX6Y8pjwDuYyO0G32pPdPdCJ0gp\nSGefLqCk5dIEkWD65Z12TQp0lGmMYGgJLCux7cWSqOf9BrL2RJWMxgmmt132\nrOi7+IqtiLybSPJJFWO6/0ICdhs9ziV/6aIqIUDIjlJyFTO2M7aWW9SMcLoy\nZeHZE0zt0tuD74c+C2rDy7PBn1CQJbVnCeB1I1N4tHmshLwiib9At04tXTG6\nlY/623xEpAgXMFgdS14biUCX0Uk5eR4cHAC+5Ssv/UjICW1p0r4Dmqt47Gxm\n+9uq9nb4ho2maX/uqJKVUyB/nVZx2GVZ5GpmFavwanYtDI9HXI/kJ2vIb90E\nM79mrhdb3C8q0MXhx1DY4wioVXA3YSHaXKtHespAi/C2y1ViFfiiS8k+5ckG\nA8uX\r\n=bxm2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAisrbFJn1mme86C5zZXelH3nzwmj8XiuQizJgAAciu/AiB+793qLMykNN5RsV284JlXkkTQOPetYuWWPBZjQofKOw=="}]},"_npmUser":{"name":"dolymood","email":"dolymood@gmail.com"},"directories":{},"maintainers":[{"name":"dolymood","email":"dolymood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-simple-uploader_1.0.0-beta.1_1641367497771_0.4178131717295308"},"_hasShrinkwrap":false},"1.0.0-beta.2":{"name":"vue-simple-uploader","version":"1.0.0-beta.2","description":"A Vue.js upload component powered by simple-uploader.js","main":"dist/vue-simple-uploader.umd.js","module":"dist/vue-simple-uploader.es.js","repository":{"type":"git","url":"git+https://github.com/simple-uploader/vue-uploader.git"},"bugs":{"url":"https://github.com/simple-uploader/vue-uploader/issues"},"homepage":"https://github.com/simple-uploader/vue-uploader","author":{"name":"dolymood@gmail.com"},"license":"MIT","scripts":{"dev":"vite --force","build":"vite build","lint":"eslint --ext .js,.vue src test/unit/specs"},"dependencies":{"simple-uploader.js":"^0.6.0"},"peerDependencies":{"vue":">=2.2"},"devDependencies":{"@vitejs/plugin-vue":"^1.2.4","@vue/compiler-sfc":"^3.1.4","autoprefixer":"^7.1.2","babel-core":"^6.22.1","babel-eslint":"^7.1.1","babel-loader":"^7.1.1","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-transform-runtime":"^6.22.0","babel-preset-env":"^1.3.2","babel-preset-stage-2":"^6.22.0","babel-register":"^6.22.0","chalk":"^2.0.1","connect-history-api-fallback":"^1.3.0","copy-webpack-plugin":"^4.0.1","css-loader":"^0.28.0","cssnano":"^3.10.0","eslint":"^4.18.2","eslint-config-standard":"^6.2.1","eslint-friendly-formatter":"^3.0.0","eslint-loader":"^1.7.1","eslint-plugin-html":"^3.0.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.14.1","html-webpack-plugin":"^2.28.0","http-proxy-middleware":"^0.17.3","mitt":"^3.0.0","opn":"^5.1.0","ora":"^1.2.0","rimraf":"^2.6.0","semver":"^5.3.0","shelljs":"^0.7.6","url-loader":"^0.5.8","vite":"^2.4.1","vue":"^3.1.4","vue-loader":"^16.3.0"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","not ie <= 8","Android >= 4.0","iOS >= 8"],"readme":"# 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://github.com/simple-uploader/Uploader)\n\n\n\n\n\n[中文](./README_zh-CN.md)\n\n## Features\n\n* Treat Folder and File as `File`\n* Pause/Resume 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@next --save\n```\n\n## Notes\n\n- https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html\n- https://github.com/LuoLiangDSGA/spring-learning/tree/master/boot-uploader\n- http://www.smarthu.club\n\n## Usage\n\n### init\n\n``` js\nimport { createApp } from 'vue'\nimport uploader from 'vue-simple-uploader'\nimport 'vue-simple-uploader/dist/style.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(uploader)\napp.mount('#app')\n```\n\n### App.vue\n\n``` vue\n\n \n \n \n
Drop files here to upload or
\n select files\n select images\n select folder\n \n \n \n\n\n\n\n\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://github.com/simple-uploader/Uploader#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(/\\syears?/, '年')\n .replace(/\\days?/, '天')\n .replace(/\\shours?/, '小时')\n .replace(/\\sminutes?/, '分钟')\n .replace(/\\sseconds?/, '秒')\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 // only use response when status is success or error\n \n // eg:\n // 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/events](https://github.com/simple-uploader/Uploader#events)\n\n**Note:**\n\n* All events name will be transformed by [lodash.kebabCase](https://github.com/lodash/lodash/blob/master/kebabCase.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\n// Composition API\nconst uploader = ref(null)\n// there will be an uploader attribute on the uploader component, which points to the Uploader instance\nconst uploaderInstance = uploader.value.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#methods\nuploaderInstance.cancel()\n\n//Options API\nconst uploaderInstance = this.$refs.uploader.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#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 / 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\n[npm-image]: https://img.shields.io/npm/v/vue-simple-uploader.svg?style=flat\n[npm-url]: https://npmjs.org/package/vue-simple-uploader\n[downloads-image]: https://img.shields.io/npm/dm/vue-simple-uploader.svg?style=flat\n[downloads-url]: https://npmjs.org/package/vue-simple-uploader\n[juejin-image]: https://img.shields.io/badge/Jue%20Jin-446Likes-blue.svg\n[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail\n\n","readmeFilename":"README.md","gitHead":"0d1808466cd2766c2b481da1bc57b99ee2bceb00","_id":"vue-simple-uploader@1.0.0-beta.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-SR1KLaO+w8YMRCUx8JobzsQIPxBuumG9KDOWeb+tO5yRjGczVLE7tRzGaBNGXoj5z2p8KAx4fELv/tlTiy7c2Q==","shasum":"59c65940b56bdfc875cff1af13cca666617663b3","tarball":"http://tools.bpmhome.cn:8082/nexus/repository/npm-lc/vue-simple-uploader/-/vue-simple-uploader-1.0.0-beta.2.tgz","fileCount":28,"unpackedSize":378853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1UkBCRA9TVsSAnZWagAAF7oQAILDp4s31+8YfNgGzlbv\n2Fl4w59p5TF78iZ4pxX8PwpZ9HWFLy/8jaJovmyPLkU1f8vPPeOtY2+46JnA\nRnKn8FYjC0j3ZDBcYaIcza/WEqovR0R+//2jLV4amKXVUyLP8bUqmCl3ZKlI\n3h+Eb9TwkepXEr0JvmvfS6rwJ90IFmQ+Vnxnz4GbpHd9NU2laAi95h5JFyux\nRKSvC1g/mKI2i87NWQvaExarGVHivIJd3tBrLc7H32nwhr5B5Y5ryR1F2mkI\nbIiGlvRJz4JMd7dywI5pdqiF8Hpx7OE2VeFD65YB7PxlyZqpIqGlMYnmMwAh\n3bF5OYpbPGhkc5ysGyT2X1Gc8AlXh20xr6ZTEh4Dvi/sXncog1Cr2p+aMFVF\nun6MDBvZB46S3iEvFbUmGRLuM8rmylJjR5lFCV5GpRD9wIM7Gdhz7/NIZX/E\nzON/6VlD8/PhoODSiV/yzDGAyn0JANRAy7pCB7mWVyHvTK8ryI9X7QTOeSsW\nz7VrudyiTHcS5N1Y/Ce0vW+4eUFf3Cy2ZrFvL1gp0Z3CnGw4BG91Efgb0BGC\nKMIkiJjIlBfLmPszHLsmz8tAH5EaL4eOyN6j1ZmxVlwcggxmA1ameV8Di62L\nlDRwLOoFAjx0+hhr4p3PtqCfqwavQ/f8lTATjqAxzudYvn3xK8Ji/tTe0JNK\nW5qq\r\n=GwA1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXfp7ddXO7hU+bRDhZLlmwI7fG8VH+a4hhuDG/B1fsAgIhALJ/Tf7km+GLV8xUe3g7VuEqWl4s30a1vEZ9w6CW4+as"}]},"_npmUser":{"name":"dolymood","email":"dolymood@gmail.com"},"directories":{},"maintainers":[{"name":"dolymood","email":"dolymood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-simple-uploader_1.0.0-beta.2_1641367809700_0.9184601422962422"},"_hasShrinkwrap":false},"1.0.0-beta.3":{"name":"vue-simple-uploader","version":"1.0.0-beta.3","description":"A Vue.js upload component powered by simple-uploader.js","main":"dist/vue-simple-uploader.umd.js","module":"dist/vue-simple-uploader.es.js","repository":{"type":"git","url":"git+https://github.com/simple-uploader/vue-uploader.git"},"bugs":{"url":"https://github.com/simple-uploader/vue-uploader/issues"},"homepage":"https://github.com/simple-uploader/vue-uploader","author":{"name":"dolymood@gmail.com"},"license":"MIT","scripts":{"dev":"vite --force","build":"vite build","lint":"eslint --ext .js,.vue src test/unit/specs"},"dependencies":{"simple-uploader.js":"^0.6.0"},"peerDependencies":{"vue":">=2.2"},"devDependencies":{"@vitejs/plugin-vue":"^1.2.4","@vue/compiler-sfc":"^3.1.4","autoprefixer":"^7.1.2","babel-core":"^6.22.1","babel-eslint":"^7.1.1","babel-loader":"^7.1.1","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-transform-runtime":"^6.22.0","babel-preset-env":"^1.3.2","babel-preset-stage-2":"^6.22.0","babel-register":"^6.22.0","chalk":"^2.0.1","connect-history-api-fallback":"^1.3.0","copy-webpack-plugin":"^4.0.1","css-loader":"^0.28.0","cssnano":"^3.10.0","eslint":"^4.18.2","eslint-config-standard":"^6.2.1","eslint-friendly-formatter":"^3.0.0","eslint-loader":"^1.7.1","eslint-plugin-html":"^3.0.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.14.1","html-webpack-plugin":"^2.28.0","http-proxy-middleware":"^0.17.3","mitt":"^3.0.0","opn":"^5.1.0","ora":"^1.2.0","rimraf":"^2.6.0","semver":"^5.3.0","shelljs":"^0.7.6","url-loader":"^0.5.8","vite":"^2.4.1","vue":"^3.1.4","vue-loader":"^16.3.0"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","not ie <= 8","Android >= 4.0","iOS >= 8"],"readme":"# 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://github.com/simple-uploader/Uploader)\n\n\n\n\n\n[中文](./README_zh-CN.md)\n\n## Features\n\n* Treat Folder and File as `File`\n* Pause/Resume 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@next --save\n```\n\n## Notes\n\n- https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html\n- https://github.com/LuoLiangDSGA/spring-learning/tree/master/boot-uploader\n- http://www.smarthu.club\n\n## Usage\n\n### init\n\n``` js\nimport { createApp } from 'vue'\nimport uploader from 'vue-simple-uploader'\nimport 'vue-simple-uploader/dist/style.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(uploader)\napp.mount('#app')\n```\n\n### App.vue\n\n``` vue\n\n \n \n \n
Drop files here to upload or
\n select files\n select images\n select folder\n \n \n \n\n\n\n\n\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://github.com/simple-uploader/Uploader#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(/\\syears?/, '年')\n .replace(/\\days?/, '天')\n .replace(/\\shours?/, '小时')\n .replace(/\\sminutes?/, '分钟')\n .replace(/\\sseconds?/, '秒')\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 // only use response when status is success or error\n \n // eg:\n // 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/events](https://github.com/simple-uploader/Uploader#events)\n\n**Note:**\n\n* All events name will be transformed by [lodash.kebabCase](https://github.com/lodash/lodash/blob/master/kebabCase.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\n// Composition API\nconst uploader = ref(null)\n// there will be an uploader attribute on the uploader component, which points to the Uploader instance\nconst uploaderInstance = uploader.value.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#methods\nuploaderInstance.cancel()\n\n//Options API\nconst uploaderInstance = this.$refs.uploader.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#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 / 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\n[npm-image]: https://img.shields.io/npm/v/vue-simple-uploader.svg?style=flat\n[npm-url]: https://npmjs.org/package/vue-simple-uploader\n[downloads-image]: https://img.shields.io/npm/dm/vue-simple-uploader.svg?style=flat\n[downloads-url]: https://npmjs.org/package/vue-simple-uploader\n[juejin-image]: https://img.shields.io/badge/Jue%20Jin-446Likes-blue.svg\n[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail\n\n","readmeFilename":"README.md","gitHead":"d07da6b3f6e557438ff8bc7e22deee4a39a7fb03","_id":"vue-simple-uploader@1.0.0-beta.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-171gDgzELntB7Y2ynm5mVb7u6EarMOQ0sYQzeGeUSQ33WMeVOgeBvoB9CDw5LRg5g0a+DqmKR6GLrV/fF+WepA==","shasum":"c8668e9018b9287443faf5f14f1a8b34267dc037","tarball":"http://tools.bpmhome.cn:8082/nexus/repository/npm-lc/vue-simple-uploader/-/vue-simple-uploader-1.0.0-beta.3.tgz","fileCount":28,"unpackedSize":378901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1UwNCRA9TVsSAnZWagAA0U4P/Ag26dweboPD41THk6R2\nXVtN5C7dx1qJTqM7gcIQwcIVtkckjh8RaYr9tIiZ2KDZQJ/CSYqWvPo/tNmh\nkPIhPWWBMqDnmSOEfP99NLA+awEB5CGB4FWNxiDkyn4XPLKAHabXoL2G2MFa\nGhLn0RtOHpnOYvQDzk1SE9CxyEoa6pZmlrQ6MmvnIiGijDZ9DGYNeBCEuIMc\nZ0diFEol2sqM3olFNhTj4YHv/SAzCucIQL7o7D8RefTGdSSHm+6bR/fBQsEY\noPQAi1IdshK4WFUDOQPHvNP/+6UoB8fncxy5eQJp+Lqiwmq+AHvw+9huKYtj\nwReoX8rCbqGe8SGKSFhYbv3SbbEfBCd4qLOS3ApQ9diqYq08mlJeohDiAy7h\n3ttqvbwotI4ovsGHa+1Fj/1dVA6Tg9BMFE2zADThY+D06TcJgKOgawzPPjl+\n+oaguV6FE4meOLAMUAXX5NrPypObiEWqB6i26+1DVqPmvfGmAoJTnXcK38Gh\nxAFUQqLBr0CM8BDAGLOTWo847uKawO4hCz4ZjwOynLSDF2p6UN0UT/+2sWUJ\nhAeHeNv29ag0XennurPPNoLakh2YB/nNSC97yMn5BXLMjMvmhgDKW10LFkjt\n6at1V7Ua2AsdQvrE+Xh8Tfpi6Ls+o3i4nzAOg53naZ1uIrslxg4YShTaWIDC\nDP52\r\n=pNlB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEeo2tL9RsGe29+gBFmKYmIT60Hxx6W6/I5DD65qORffAiAXKED8JtOkRPZBNW6fX2dRqjpeP0+zeUtRtq4Eti6k9g=="}]},"_npmUser":{"name":"dolymood","email":"dolymood@gmail.com"},"directories":{},"maintainers":[{"name":"dolymood","email":"dolymood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-simple-uploader_1.0.0-beta.3_1641368589180_0.8205982270814787"},"_hasShrinkwrap":false},"1.0.0-beta.4":{"name":"vue-simple-uploader","version":"1.0.0-beta.4","description":"A Vue.js upload component powered by simple-uploader.js","main":"dist/vue-simple-uploader.umd.js","module":"dist/vue-simple-uploader.es.js","repository":{"type":"git","url":"git+https://github.com/simple-uploader/vue-uploader.git"},"bugs":{"url":"https://github.com/simple-uploader/vue-uploader/issues"},"homepage":"https://github.com/simple-uploader/vue-uploader","author":{"name":"dolymood@gmail.com"},"license":"MIT","scripts":{"dev":"vite --force","build":"vite build","lint":"eslint --ext .js,.vue src test/unit/specs","release":"npm run build && npm publish --tag next"},"dependencies":{"simple-uploader.js":"^0.6.0"},"peerDependencies":{"vue":">=3.1"},"devDependencies":{"@vitejs/plugin-vue":"^1.2.4","@vue/compiler-sfc":"^3.1.4","autoprefixer":"^7.1.2","babel-core":"^6.22.1","babel-eslint":"^7.1.1","babel-loader":"^7.1.1","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-transform-runtime":"^6.22.0","babel-preset-env":"^1.3.2","babel-preset-stage-2":"^6.22.0","babel-register":"^6.22.0","chalk":"^2.0.1","connect-history-api-fallback":"^1.3.0","copy-webpack-plugin":"^4.0.1","css-loader":"^0.28.0","cssnano":"^3.10.0","eslint":"^4.18.2","eslint-config-standard":"^6.2.1","eslint-friendly-formatter":"^3.0.0","eslint-loader":"^1.7.1","eslint-plugin-html":"^3.0.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.14.1","html-webpack-plugin":"^2.28.0","http-proxy-middleware":"^0.17.3","mitt":"^3.0.0","opn":"^5.1.0","ora":"^1.2.0","rimraf":"^2.6.0","semver":"^5.3.0","shelljs":"^0.7.6","url-loader":"^0.5.8","vite":"^2.4.1","vue":"^3.1.4","vue-loader":"^16.3.0"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","not ie <= 8","Android >= 4.0","iOS >= 8"],"readme":"# 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://github.com/simple-uploader/Uploader)\n\n\n\n\n\n[中文](./README_zh-CN.md)\n\n## Features\n\n* Treat Folder and File as `File`\n* Pause/Resume 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@next --save\n```\n\n## Notes\n\n- https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html\n- https://github.com/LuoLiangDSGA/spring-learning/tree/master/boot-uploader\n- http://www.smarthu.club\n\n## Usage\n\n### init\n\n``` js\nimport { createApp } from 'vue'\nimport uploader from 'vue-simple-uploader'\nimport 'vue-simple-uploader/dist/style.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(uploader)\napp.mount('#app')\n```\n\n### App.vue\n\n``` vue\n\n \n \n \n
Drop files here to upload or
\n select files\n select images\n select folder\n \n \n \n\n\n\n\n\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://github.com/simple-uploader/Uploader#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(/\\syears?/, '年')\n .replace(/\\days?/, '天')\n .replace(/\\shours?/, '小时')\n .replace(/\\sminutes?/, '分钟')\n .replace(/\\sseconds?/, '秒')\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 // only use response when status is success or error\n \n // eg:\n // 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/events](https://github.com/simple-uploader/Uploader#events)\n\n**Note:**\n\n* All events name will be transformed by [lodash.kebabCase](https://github.com/lodash/lodash/blob/master/kebabCase.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\n// Composition API\nconst uploader = ref(null)\n// there will be an uploader attribute on the uploader component, which points to the Uploader instance\nconst uploaderInstance = uploader.value.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#methods\nuploaderInstance.cancel()\n\n//Options API\nconst uploaderInstance = this.$refs.uploader.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#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 / 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\n[npm-image]: https://img.shields.io/npm/v/vue-simple-uploader.svg?style=flat\n[npm-url]: https://npmjs.org/package/vue-simple-uploader\n[downloads-image]: https://img.shields.io/npm/dm/vue-simple-uploader.svg?style=flat\n[downloads-url]: https://npmjs.org/package/vue-simple-uploader\n[juejin-image]: https://img.shields.io/badge/Jue%20Jin-446Likes-blue.svg\n[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail\n\n","readmeFilename":"README.md","gitHead":"bd805624cfaf42bbf3d3fedb26b9f1c05e3ebfbb","_id":"vue-simple-uploader@1.0.0-beta.4","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-pkmBkUGHvR5l6CU9Hi3U/wM3IaO7XNko+NxxDS6phUsnWoefgnYST6TQycyZKH8W0c8xLDeHKbKIX2H7rNjW5g==","shasum":"fa39f93087f4ea8b1f37ae15b8af9cc4af38609e","tarball":"http://tools.bpmhome.cn:8082/nexus/repository/npm-lc/vue-simple-uploader/-/vue-simple-uploader-1.0.0-beta.4.tgz","fileCount":28,"unpackedSize":378838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6M/jCRA9TVsSAnZWagAA0uoQAJLpj1kF2ozxT3vXHw9K\nVnuJnOJJe6/w+47N/PgsfBwADpc9ZoeSCmUPeXdKlMNahOPQzNZtk2BjkHAc\nqP4VMpVAuKTrrZ8x8FdlOz+XmfhDIwg7kJenPephv2caxBYyQ7eYqXquVgcB\n8atSNgPUz9FVwUtdF0PRtAUtU+Ka+pSXUJCl6PT2Onu4tC0R4PfP5hmjumww\n1/w+4X18cD8MY3/ObRc+V6CwPpG0eneInKb9tkdE11jp6W7m3OnjGzply2Di\nkEISbkiOkK2O9MT3/F25SobedyiS+d98/icjGjFNxtH9uzcwhAZEFL2uYWhL\nTi6ZtNSJNmpa5TcwcgwNEzzFDiqO31GUwcBan7sR65RVNO/RJfJIvuElYDwh\nzDfLRSbfLfrmoujByCHDRv1Um+vuK3bNL+46qckHk9b4nPR4OWpAop14NyMu\nqX2yVFHaEH07Of2r0kYfvRB3qnIY1fKBoOIoePLw9hzxeUrEtYduWO12jQB7\n3VEiWv1E4N4gqqtSbJjJTFwUgvxUUrGU0EgLm6W5g5TIZ/8TimAPL78bIZ7B\n88z0U3Eccsf44fHGhM3/rxiI7/x0vAbGekEWLSoM/bo2fBdX2ZJLkZL4mwnn\nYX4IwRXzOLM+NyuC0xJR3VnlP44QMqkT3WTGu6Bb89vtQf4ltaBF/UMJwtE7\nJ0Mh\r\n=39rl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQLFNTgo8ha5wpQ2E7oAwMKHPMe2hpdwOM/Ej3lH6TNQIgNgXJhAkvuQhvDrTIoxCUNj7+Y92h01wNDF5mVY4H3+c="}]},"_npmUser":{"name":"dolymood","email":"dolymood@gmail.com"},"directories":{},"maintainers":[{"name":"dolymood","email":"dolymood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-simple-uploader_1.0.0-beta.4_1642647523259_0.6299889264815897"},"_hasShrinkwrap":false},"1.0.0-beta.5":{"name":"vue-simple-uploader","version":"1.0.0-beta.5","description":"A Vue.js upload component powered by simple-uploader.js","main":"dist/vue-simple-uploader.umd.js","module":"dist/vue-simple-uploader.es.js","repository":{"type":"git","url":"git+https://github.com/simple-uploader/vue-uploader.git"},"bugs":{"url":"https://github.com/simple-uploader/vue-uploader/issues"},"homepage":"https://github.com/simple-uploader/vue-uploader","author":{"name":"dolymood@gmail.com"},"license":"MIT","scripts":{"dev":"vite --force","build":"vite build","lint":"eslint --ext .js,.vue src test/unit/specs","release":"npm run build && npm publish --tag next"},"dependencies":{"simple-uploader.js":"^0.6.0"},"peerDependencies":{"vue":">=3.1"},"devDependencies":{"@vitejs/plugin-vue":"^1.2.4","@vue/compiler-sfc":"^3.1.4","autoprefixer":"^7.1.2","babel-core":"^6.22.1","babel-eslint":"^7.1.1","babel-loader":"^7.1.1","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-transform-runtime":"^6.22.0","babel-preset-env":"^1.3.2","babel-preset-stage-2":"^6.22.0","babel-register":"^6.22.0","chalk":"^2.0.1","connect-history-api-fallback":"^1.3.0","copy-webpack-plugin":"^4.0.1","css-loader":"^0.28.0","cssnano":"^3.10.0","eslint":"^4.18.2","eslint-config-standard":"^6.2.1","eslint-friendly-formatter":"^3.0.0","eslint-loader":"^1.7.1","eslint-plugin-html":"^3.0.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.14.1","html-webpack-plugin":"^2.28.0","http-proxy-middleware":"^0.17.3","mitt":"^3.0.0","opn":"^5.1.0","ora":"^1.2.0","rimraf":"^2.6.0","semver":"^5.3.0","shelljs":"^0.7.6","url-loader":"^0.5.8","vite":"^2.4.1","vue":"^3.1.4","vue-loader":"^16.3.0"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","not ie <= 8","Android >= 4.0","iOS >= 8"],"readme":"# 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://github.com/simple-uploader/Uploader)\n\n\n\n\n\n[中文](./README_zh-CN.md)\n\n## Features\n\n* Treat Folder and File as `File`\n* Pause/Resume 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@next --save\n```\n\n## Notes\n\n- https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html\n- https://github.com/LuoLiangDSGA/spring-learning/tree/master/boot-uploader\n- http://www.smarthu.club\n\n## Usage\n\n### init\n\n``` js\nimport { createApp } from 'vue'\nimport uploader from 'vue-simple-uploader'\nimport 'vue-simple-uploader/dist/style.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(uploader)\napp.mount('#app')\n```\n\n### App.vue\n\n``` vue\n\n \n \n \n
Drop files here to upload or
\n select files\n select images\n select folder\n \n \n \n\n\n\n\n\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://github.com/simple-uploader/Uploader#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(/\\syears?/, '年')\n .replace(/\\days?/, '天')\n .replace(/\\shours?/, '小时')\n .replace(/\\sminutes?/, '分钟')\n .replace(/\\sseconds?/, '秒')\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 // only use response when status is success or error\n \n // eg:\n // 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/events](https://github.com/simple-uploader/Uploader#events)\n\n**Note:**\n\n* All events name will be transformed by [lodash.kebabCase](https://github.com/lodash/lodash/blob/master/kebabCase.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\n// Composition API\nconst uploader = ref(null)\n// there will be an uploader attribute on the uploader component, which points to the Uploader instance\nconst uploaderInstance = uploader.value.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#methods\nuploaderInstance.cancel()\n\n//Options API\nconst uploaderInstance = this.$refs.uploader.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#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 / 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\n[npm-image]: https://img.shields.io/npm/v/vue-simple-uploader.svg?style=flat\n[npm-url]: https://npmjs.org/package/vue-simple-uploader\n[downloads-image]: https://img.shields.io/npm/dm/vue-simple-uploader.svg?style=flat\n[downloads-url]: https://npmjs.org/package/vue-simple-uploader\n[juejin-image]: https://img.shields.io/badge/Jue%20Jin-446Likes-blue.svg\n[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail\n\n","readmeFilename":"README.md","gitHead":"8ec9f5b64cd415b0d19ad3ebbe335f1ff91792b9","_id":"vue-simple-uploader@1.0.0-beta.5","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-VJFQvYTqx8vd4OOAopafcHdRp25iBqUywbBDohpS+nLerUbotAfkH4WsCzaTWFFSF2PRLdbPX1yxijADxv+sGg==","shasum":"f30ba8b6fdf7f554692845c923fa1bf0c6fa182c","tarball":"http://tools.bpmhome.cn:8082/nexus/repository/npm-lc/vue-simple-uploader/-/vue-simple-uploader-1.0.0-beta.5.tgz","fileCount":28,"unpackedSize":378865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6NZcCRA9TVsSAnZWagAASXMQAJQNI3FeKO/4oNzjg7mU\nu/kO4LDy2hKsgILfIiFNsnbUw9+eAYCDCiPXAsmysRiaFMMNysQOtx16K9B/\nO/3hLPAlbBtlSGBcTdSdUnWl/1TW7bdpPrvberCmvPJpyibGP3RoCyPiaxQp\nYQW/KQvDTXYs8Qq587QZH0KhoxZzFqurRCbcb56f5ya/kv3jlsHVNtgBh8R0\nGGjeGvXu/inGz5GZJRpYxGOVwJrBHE/GwF8B/S8vhf/QhwgGlLZ22XdwU65i\nJTpNj4AXjxm10AkR+6qUxR/81s4QpWoWfuJT64dT4LsCLojpapj0sWOn5Wqm\n4fPTV7CEhQgPs0N/Z1FX4gBVEH5uh4X9N73lcKl3PeDU//udyKV42V/vM3ba\nxvA18y6SZFnO7YHLQlES5QNyN1MTrxtZbsExXNCEY8Wys8+eMgENz6N3jSYM\n+CEbhvRHd2zfeXvrWbuXMjJqKGTpEhulkXecFTZXD2xCuWv0ZuGLlCyWiIm0\nZGALemg+JTcebxgeXok4LkHNo4owZvFh80702gweTCSdQYc3vk5/iJQTRNQt\n4VbAEeNG1HldxlFCdgjneoNp7XuJcsk8pVzKhsAjpPMpqwALmbqSYW+EY0wN\nWAU+cGdYKA8j99r0qWpbxPM3yy9WLBEJE/mxfSpdeoXvu6+yJpADlAUh6cB+\nfxnw\r\n=pFrH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuwfMStJlBqD0vU13kwFyAOR7V/yE0gJCt7AP736AufAIgJk9B1gD+xvKBweKGPv5lu+sHud1wpruuh0F7fMQfwss="}]},"_npmUser":{"name":"dolymood","email":"dolymood@gmail.com"},"directories":{},"maintainers":[{"name":"dolymood","email":"dolymood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-simple-uploader_1.0.0-beta.5_1642649180291_0.03636355108829359"},"_hasShrinkwrap":false},"1.0.0":{"name":"vue-simple-uploader","version":"1.0.0","description":"A Vue.js upload component powered by simple-uploader.js","main":"dist/vue-simple-uploader.umd.js","module":"dist/vue-simple-uploader.es.js","repository":{"type":"git","url":"git+https://github.com/simple-uploader/vue-uploader.git"},"bugs":{"url":"https://github.com/simple-uploader/vue-uploader/issues"},"homepage":"https://github.com/simple-uploader/vue-uploader","author":{"name":"dolymood@gmail.com"},"license":"MIT","scripts":{"dev":"vite --force","build":"vite build","lint":"eslint --ext .js,.vue src test/unit/specs","release":"npm run build && npm publish --tag next"},"dependencies":{"simple-uploader.js":"^0.6.0"},"peerDependencies":{"vue":">=3.1"},"devDependencies":{"@vitejs/plugin-vue":"^1.2.4","@vue/compiler-sfc":"^3.1.4","autoprefixer":"^7.1.2","babel-core":"^6.22.1","babel-eslint":"^7.1.1","babel-loader":"^7.1.1","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-transform-runtime":"^6.22.0","babel-preset-env":"^1.3.2","babel-preset-stage-2":"^6.22.0","babel-register":"^6.22.0","chalk":"^2.0.1","connect-history-api-fallback":"^1.3.0","copy-webpack-plugin":"^4.0.1","css-loader":"^0.28.0","cssnano":"^3.10.0","eslint":"^4.18.2","eslint-config-standard":"^6.2.1","eslint-friendly-formatter":"^3.0.0","eslint-loader":"^1.7.1","eslint-plugin-html":"^3.0.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.14.1","html-webpack-plugin":"^2.28.0","http-proxy-middleware":"^0.17.3","mitt":"^3.0.0","opn":"^5.1.0","ora":"^1.2.0","rimraf":"^2.6.0","semver":"^5.3.0","shelljs":"^0.7.6","url-loader":"^0.5.8","vite":"^2.4.1","vue":"^3.1.4","vue-loader":"^16.3.0"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","not ie <= 8","Android >= 4.0","iOS >= 8"],"readme":"# 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://github.com/simple-uploader/Uploader)\n\n\n\n\n\n[中文](./README_zh-CN.md)\n\n## Features\n\n* Treat Folder and File as `File`\n* Pause/Resume 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@next --save\n```\n\n## Notes\n\n- https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html\n- https://github.com/LuoLiangDSGA/spring-learning/tree/master/boot-uploader\n- http://www.smarthu.club\n\n## Usage\n\n### init\n\n``` js\nimport { createApp } from 'vue'\nimport uploader from 'vue-simple-uploader'\nimport 'vue-simple-uploader/dist/style.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(uploader)\napp.mount('#app')\n```\n\n### App.vue\n\n``` vue\n\n \n \n \n\n\n\n\n\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://github.com/simple-uploader/Uploader#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(/\\syears?/, '年')\n .replace(/\\days?/, '天')\n .replace(/\\shours?/, '小时')\n .replace(/\\sminutes?/, '分钟')\n .replace(/\\sseconds?/, '秒')\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 // only use response when status is success or error\n \n // eg:\n // return response data ?\n return response.data\n } else {\n return statusTextMap[status]\n }\n }\n ```\n\n* `onFileAdded(file) {Function}`\n \n After `1.0.0`.\n\n Called when file is added, this function is used for file validation. To reject(filter) this file you should `return false`.\n\n* `onFilesAdded(files, fileList) {Function}`\n\n After `1.0.0`.\n\n Called when files are added, this function is used for files validation. To reject(filter) these files you should `return false`.\n\n#### Events\n\nSee [simple-uploader.js uploader/events](https://github.com/simple-uploader/Uploader#events)\n\n**Note:**\n\n* All events name will be transformed by [lodash.kebabCase](https://github.com/lodash/lodash/blob/master/kebabCase.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\n// Composition API\nconst uploader = ref(null)\n// there will be an uploader attribute on the uploader component, which points to the Uploader instance\nconst uploaderInstance = uploader.value.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#methods\nuploaderInstance.cancel()\n\n//Options API\nconst uploaderInstance = this.$refs.uploader.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#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 / 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\n[npm-image]: https://img.shields.io/npm/v/vue-simple-uploader.svg?style=flat\n[npm-url]: https://npmjs.org/package/vue-simple-uploader\n[downloads-image]: https://img.shields.io/npm/dm/vue-simple-uploader.svg?style=flat\n[downloads-url]: https://npmjs.org/package/vue-simple-uploader\n[juejin-image]: https://img.shields.io/badge/Jue%20Jin-446Likes-blue.svg\n[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail\n\n","readmeFilename":"README.md","gitHead":"30db869600b1f65ae10fbe01f18d90be454b564b","_id":"vue-simple-uploader@1.0.0","_nodeVersion":"12.18.4","_npmVersion":"8.1.0","dist":{"integrity":"sha512-GRc24H4Iswa1QOtIXDmWUS541HOHIdF0kQ/K6mj0XneCGZC3bDvnkb3fQetFJjS20PvvqBqgAlY8jG3+lLmjtQ==","shasum":"848f626611df62e6bb258b51c5652dbce9319bc8","tarball":"http://tools.bpmhome.cn:8082/nexus/repository/npm-lc/vue-simple-uploader/-/vue-simple-uploader-1.0.0.tgz","fileCount":29,"unpackedSize":382119,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCACT7N1Cwq06e/Zej7/GbblWP7+b/hN9jz/9InBHXXCAIgCB75eXYRZ3hDE+1NUUOFPvjB3+ZvNc3b9WjY06qjkAU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/Dy3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq40A//V0Sqfv4Dfmtk1x5ViLr/2tNH+n8znAduSJL4AWyWqiXu0Crc\r\nse0KCrKgw41ryXiQMSVLlaLDnlxMbgLdWg8AXUyjwiTZI1lCPYt2Va5adxMU\r\nskzA6H6EGsWDbpScyl9S1BbAlchlznkW62e9Xjj6+UjtL46jJc3eshjCv8li\r\nGhoJ3eZ4dBXlH0GKNVw5Ie6yLqAp1NyCYzfudKiyRSHYqtm7p+L5kCdObyla\r\nfg29qPEMICsWf+4nnDvjvX2QusmUVLlQpsGoJWAO4O+cs7Ngt9a5DacnRE8k\r\ntSSNX9WcClFnRDqsqsC3JKF09S3485RMvD7XYwjhIKWgdM7PNxJxkmc/7iRV\r\nVIqT6168zJBG4n8gQMKpKPhLZkxoomExkfoFI/ayNxPcvLVV8yHoqtBxiNtU\r\ns/NpcDS7LXfMm6FykSMt2MOhv6kwb6RT4J9GLRflgSTFV+gUYrTSRIM3ewpW\r\nWwDK7c+3erVnX1ToNF4YJeTU97TLscjSQzKPvbZ0dMnjmYHZo9+3mM4ZHRiZ\r\nbG5jxLk/6HfTzhX4JtBww9izFaHd5bB5zJAnwgJMyXQVsY4aLFZf78kO8gUW\r\nU+iyx/r5C2xMpXTDdck9aypGd926zmSa/ZnLUcXJXLNdrQP+SmxWEo2CFMZT\r\nl5RalcAGPDqghE0me42OGqCqjlkQrR4xh6M=\r\n=7BPi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dolymood","email":"dolymood@gmail.com"},"directories":{},"maintainers":[{"name":"dolymood","email":"dolymood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-simple-uploader_1.0.0_1677474999391_0.011004449062101962"},"_hasShrinkwrap":false},"1.0.1":{"name":"vue-simple-uploader","version":"1.0.1","description":"A Vue.js upload component powered by simple-uploader.js","main":"dist/vue-simple-uploader.umd.js","module":"dist/vue-simple-uploader.es.js","repository":{"type":"git","url":"git+https://github.com/simple-uploader/vue-uploader.git"},"bugs":{"url":"https://github.com/simple-uploader/vue-uploader/issues"},"homepage":"https://github.com/simple-uploader/vue-uploader","author":{"name":"dolymood@gmail.com"},"license":"MIT","scripts":{"dev":"vite --force","build":"vite build","lint":"eslint --ext .js,.vue src test/unit/specs","release":"npm run build && npm publish --tag next"},"dependencies":{"simple-uploader.js":"^0.6.0"},"peerDependencies":{"vue":">=3.1"},"devDependencies":{"@vitejs/plugin-vue":"^1.2.4","@vue/compiler-sfc":"^3.1.4","autoprefixer":"^7.1.2","babel-core":"^6.22.1","babel-eslint":"^7.1.1","babel-loader":"^7.1.1","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-transform-runtime":"^6.22.0","babel-preset-env":"^1.3.2","babel-preset-stage-2":"^6.22.0","babel-register":"^6.22.0","chalk":"^2.0.1","connect-history-api-fallback":"^1.3.0","copy-webpack-plugin":"^4.0.1","css-loader":"^0.28.0","cssnano":"^3.10.0","eslint":"^4.18.2","eslint-config-standard":"^6.2.1","eslint-friendly-formatter":"^3.0.0","eslint-loader":"^1.7.1","eslint-plugin-html":"^3.0.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.14.1","html-webpack-plugin":"^2.28.0","http-proxy-middleware":"^0.17.3","mitt":"^3.0.0","opn":"^5.1.0","ora":"^1.2.0","rimraf":"^2.6.0","semver":"^5.3.0","shelljs":"^0.7.6","url-loader":"^0.5.8","vite":"^2.4.1","vue":"^3.1.4","vue-loader":"^16.3.0"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","not ie <= 8","Android >= 4.0","iOS >= 8"],"readme":"# 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://github.com/simple-uploader/Uploader)\n\n\n\n\n\n[中文](./README_zh-CN.md)\n\n## Features\n\n* Treat Folder and File as `File`\n* Pause/Resume 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@next --save\n```\n\n## Notes\n\n- https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html\n- https://github.com/LuoLiangDSGA/spring-learning/tree/master/boot-uploader\n- http://www.smarthu.club\n\n## Usage\n\n### init\n\n``` js\nimport { createApp } from 'vue'\nimport uploader from 'vue-simple-uploader'\nimport 'vue-simple-uploader/dist/style.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(uploader)\napp.mount('#app')\n```\n\n### App.vue\n\n``` vue\n\n \n \n \n\n\n\n\n\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://github.com/simple-uploader/Uploader#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(/\\syears?/, '年')\n .replace(/\\days?/, '天')\n .replace(/\\shours?/, '小时')\n .replace(/\\sminutes?/, '分钟')\n .replace(/\\sseconds?/, '秒')\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 // only use response when status is success or error\n \n // eg:\n // return response data ?\n return response.data\n } else {\n return statusTextMap[status]\n }\n }\n ```\n\n* `onFileAdded(file) {Function}`\n \n After `1.0.0`.\n\n Called when file is added, this function is used for file validation. To reject(filter) this file you should `return false`.\n\n* `onFilesAdded(files, fileList) {Function}`\n\n After `1.0.0`.\n\n Called when files are added, this function is used for files validation. To reject(filter) these files you should `return false`.\n\n#### Events\n\nSee [simple-uploader.js uploader/events](https://github.com/simple-uploader/Uploader#events)\n\n**Note:**\n\n* All events name will be transformed by [lodash.kebabCase](https://github.com/lodash/lodash/blob/master/kebabCase.js), eg: `fileSuccess` will be transformed to `file-success`\n\n* `catchAll` event will not be emited.\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\n// Composition API\nconst uploader = ref(null)\n// there will be an uploader attribute on the uploader component, which points to the Uploader instance\nconst uploaderInstance = uploader.value.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#methods\nuploaderInstance.cancel()\n\n//Options API\nconst uploaderInstance = this.$refs.uploader.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#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 / 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\n[npm-image]: https://img.shields.io/npm/v/vue-simple-uploader.svg?style=flat\n[npm-url]: https://npmjs.org/package/vue-simple-uploader\n[downloads-image]: https://img.shields.io/npm/dm/vue-simple-uploader.svg?style=flat\n[downloads-url]: https://npmjs.org/package/vue-simple-uploader\n[juejin-image]: https://img.shields.io/badge/Jue%20Jin-446Likes-blue.svg\n[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail\n\n","readmeFilename":"README.md","gitHead":"b7104e9eb270ac675fbf6225a2de8bb9146fcaac","_id":"vue-simple-uploader@1.0.1","_nodeVersion":"12.18.4","_npmVersion":"8.1.0","dist":{"integrity":"sha512-upkQeG1eRYO2b5mTdPP1nXohEDk38p9AvR7ao9b8oyIcChUlhnOxS/fs0SDnbkhv2lCYrqx2AGkqoqSKZtgp6g==","shasum":"5592efeaa757b528ce0b9cb9afc3efd02b576241","tarball":"http://tools.bpmhome.cn:8082/nexus/repository/npm-lc/vue-simple-uploader/-/vue-simple-uploader-1.0.1.tgz","fileCount":29,"unpackedSize":382550,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5tBh2HAMBnZela3mtqomZ5aVpz+jnNUabwDFtoA9ykAIhAMD/KQlYxa0atnHeMXjAH3RS4knY1olIXNgHE9bua7ko"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBvrGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQshAAo1TRV10/eWStOLDg6id2rZhRwZ/Xp1oi0sD3HndXSiv4Huc5\r\nYSz4FmUVztkrr3c71lqY9tf98JOPmvYzcSZdTb27l4YraeGSLS1knDv5/el2\r\nIHO8D3J2b844D/k5VXIujVBpPP3G79S3ka4Et9r4TloRMOHKU1ZMQZMeZ5zJ\r\nq7N27dnWvWVNuWZNMZ+DjQRM34Hr/h/h9nJtICoWIFENooqltilxgmmDCovm\r\n1V7nzXO8h4QAVjNrm+iAVBZOBqu/UJUVMAezwmc9glRqDLzRIJRbB32YdRzl\r\nbSs3fgfcUHMdhaY7/wsYg9cDTJr9zoohXF7uygHwIcixU+L0PQpn3rQ1LT2w\r\nsWOiCRwEL5ycdUCBWr43DnWpaw5eLN8qiop3MdrtAafU4QjFu82kDuOHDdRA\r\nryKHxM5Czy1+pfUHbw/Whg/39UG4EuX+KLvYtcvjJhcTeQJ4iZSEGYcbvkLV\r\nnvvyQeidcYhrOo0d01TVvO0jcMoAtsLhPOseNMUhRJHxtfAVBLfSV1tPgchT\r\n9Jlo63T3uY+0q0dsPJWC7QFyPnx/UecZksVKP2Ds70ueAoyproWPZCrxWBvr\r\nR7cIHte7K2nJoLmTlkDH67UAyFi/CMSeK6wJ50nGHSPnG+AzF40BNHBARPxY\r\nw9e4TfmyCzBWo1j4EEKV7klurfN8h34g6ww=\r\n=iPX+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dolymood","email":"dolymood@gmail.com"},"directories":{},"maintainers":[{"name":"dolymood","email":"dolymood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-simple-uploader_1.0.1_1678179014165_0.9559156761561376"},"_hasShrinkwrap":false},"1.0.2":{"name":"vue-simple-uploader","version":"1.0.2","description":"A Vue.js upload component powered by simple-uploader.js","main":"dist/vue-simple-uploader.umd.js","module":"dist/vue-simple-uploader.es.js","repository":{"type":"git","url":"git+https://github.com/simple-uploader/vue-uploader.git"},"bugs":{"url":"https://github.com/simple-uploader/vue-uploader/issues"},"homepage":"https://github.com/simple-uploader/vue-uploader","author":{"name":"dolymood@gmail.com"},"license":"MIT","scripts":{"dev":"vite --force","build":"vite build","lint":"eslint --ext .js,.vue src test/unit/specs","release":"npm run build && npm publish --tag next"},"dependencies":{"simple-uploader.js":"^0.6.0"},"peerDependencies":{"vue":">=3.1"},"devDependencies":{"@vitejs/plugin-vue":"^1.2.4","@vue/compiler-sfc":"^3.1.4","autoprefixer":"^7.1.2","babel-core":"^6.22.1","babel-eslint":"^7.1.1","babel-loader":"^7.1.1","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-transform-runtime":"^6.22.0","babel-preset-env":"^1.3.2","babel-preset-stage-2":"^6.22.0","babel-register":"^6.22.0","chalk":"^2.0.1","connect-history-api-fallback":"^1.3.0","copy-webpack-plugin":"^4.0.1","css-loader":"^0.28.0","cssnano":"^3.10.0","eslint":"^4.18.2","eslint-config-standard":"^6.2.1","eslint-friendly-formatter":"^3.0.0","eslint-loader":"^1.7.1","eslint-plugin-html":"^3.0.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.14.1","html-webpack-plugin":"^2.28.0","http-proxy-middleware":"^0.17.3","mitt":"^3.0.0","opn":"^5.1.0","ora":"^1.2.0","rimraf":"^2.6.0","semver":"^5.3.0","shelljs":"^0.7.6","url-loader":"^0.5.8","vite":"^2.4.1","vue":"^3.1.4","vue-loader":"^16.3.0"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","not ie <= 8","Android >= 4.0","iOS >= 8"],"readme":"# 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://github.com/simple-uploader/Uploader)\n\n\n\n\n\n[中文](./README_zh-CN.md)\n\n## Features\n\n* Treat Folder and File as `File`\n* Pause/Resume 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@next --save\n```\n\n## Notes\n\n- https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html\n- https://github.com/LuoLiangDSGA/spring-learning/tree/master/boot-uploader\n- http://www.smarthu.club\n\n## Usage\n\n### init\n\n``` js\nimport { createApp } from 'vue'\nimport uploader from 'vue-simple-uploader'\nimport 'vue-simple-uploader/dist/style.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(uploader)\napp.mount('#app')\n```\n\n### App.vue\n\n``` vue\n\n \n \n \n\n\n\n\n\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://github.com/simple-uploader/Uploader#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(/\\syears?/, '年')\n .replace(/\\days?/, '天')\n .replace(/\\shours?/, '小时')\n .replace(/\\sminutes?/, '分钟')\n .replace(/\\sseconds?/, '秒')\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 // only use response when status is success or error\n \n // eg:\n // return response data ?\n return response.data\n } else {\n return statusTextMap[status]\n }\n }\n ```\n\n* `onFileAdded(file) {Function}`\n \n After `1.0.0`.\n\n Called when file is added, this function is used for file validation. To reject(filter) this file you should `return false`.\n\n* `onFilesAdded(files, fileList) {Function}`\n\n After `1.0.0`.\n\n Called when files are added, this function is used for files validation. To reject(filter) these files you should `return false`.\n\n#### Events\n\nSee [simple-uploader.js uploader/events](https://github.com/simple-uploader/Uploader#events)\n\n**Note:**\n\n* All events name will be transformed by [lodash.kebabCase](https://github.com/lodash/lodash/blob/master/kebabCase.js), eg: `fileSuccess` will be transformed to `file-success`\n\n* `catchAll` event will not be emited.\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\n// Composition API\nconst uploader = ref(null)\n// there will be an uploader attribute on the uploader component, which points to the Uploader instance\nconst uploaderInstance = uploader.value.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#methods\nuploaderInstance.cancel()\n\n//Options API\nconst uploaderInstance = this.$refs.uploader.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#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 / 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\n[npm-image]: https://img.shields.io/npm/v/vue-simple-uploader.svg?style=flat\n[npm-url]: https://npmjs.org/package/vue-simple-uploader\n[downloads-image]: https://img.shields.io/npm/dm/vue-simple-uploader.svg?style=flat\n[downloads-url]: https://npmjs.org/package/vue-simple-uploader\n[juejin-image]: https://img.shields.io/badge/Jue%20Jin-446Likes-blue.svg\n[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail\n\n","readmeFilename":"README.md","gitHead":"b974b4a33525e16b0350e8879a667dfe2e4470fb","_id":"vue-simple-uploader@1.0.2","_nodeVersion":"14.20.0","_npmVersion":"6.14.17","dist":{"integrity":"sha512-HMlSsI6AZ5QUeBDpym+oP/YlfieDDjfndvGFafQlSKiujxxhQ35OItEcuGX4+FQ44iryysAloWS+OnsBB1gvZQ==","shasum":"207782f4d6ea650633434666aebaff8fea9d5a00","tarball":"http://tools.bpmhome.cn:8082/nexus/repository/npm-lc/vue-simple-uploader/-/vue-simple-uploader-1.0.2.tgz","fileCount":29,"unpackedSize":382640,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIApV6/DaOo/Fv0CCvs8JicCgxpZP/KDTADECvMnTdOAdAiEAoEvoC3hJKvEN36aVi8abZvLYhizxoMpyDhs3wR2rrM0="}]},"_npmUser":{"name":"dolymood","email":"dolymood@gmail.com"},"directories":{},"maintainers":[{"name":"dolymood","email":"dolymood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-simple-uploader_1.0.2_1696843285976_0.16070827887978645"},"_hasShrinkwrap":false},"1.0.3":{"name":"vue-simple-uploader","version":"1.0.3","description":"A Vue.js upload component powered by simple-uploader.js","main":"dist/vue-simple-uploader.umd.js","module":"dist/vue-simple-uploader.es.js","repository":{"type":"git","url":"git+https://github.com/simple-uploader/vue-uploader.git"},"bugs":{"url":"https://github.com/simple-uploader/vue-uploader/issues"},"homepage":"https://github.com/simple-uploader/vue-uploader","author":{"name":"dolymood@gmail.com"},"license":"MIT","scripts":{"dev":"vite --force","build":"vite build","lint":"eslint --ext .js,.vue src test/unit/specs","release":"npm run build && npm publish --tag next"},"dependencies":{"simple-uploader.js":"^0.6.0"},"peerDependencies":{"vue":">=3.1"},"devDependencies":{"@vitejs/plugin-vue":"^1.2.4","@vue/compiler-sfc":"^3.4.0","autoprefixer":"^7.1.2","babel-core":"^6.22.1","babel-eslint":"^7.1.1","babel-loader":"^7.1.1","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-transform-runtime":"^6.22.0","babel-preset-env":"^1.3.2","babel-preset-stage-2":"^6.22.0","babel-register":"^6.22.0","chalk":"^2.0.1","connect-history-api-fallback":"^1.3.0","copy-webpack-plugin":"^4.0.1","css-loader":"^0.28.0","cssnano":"^3.10.0","eslint":"^4.18.2","eslint-config-standard":"^6.2.1","eslint-friendly-formatter":"^3.0.0","eslint-loader":"^1.7.1","eslint-plugin-html":"^3.0.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.14.1","html-webpack-plugin":"^2.28.0","http-proxy-middleware":"^0.17.3","mitt":"^3.0.0","opn":"^5.1.0","ora":"^1.2.0","rimraf":"^2.6.0","semver":"^5.3.0","shelljs":"^0.7.6","url-loader":"^0.5.8","vite":"^2.4.1","vue":"^3.4.0","vue-loader":"^16.3.0"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","not ie <= 8","Android >= 4.0","iOS >= 8"],"readme":"# 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://github.com/simple-uploader/Uploader)\n\n\n\n\n\n[中文](./README_zh-CN.md)\n\n## Features\n\n* Treat Folder and File as `File`\n* Pause/Resume 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@next --save\n```\n\n## Notes\n\n- https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html\n- https://github.com/LuoLiangDSGA/spring-learning/tree/master/boot-uploader\n- http://www.smarthu.club\n\n## Usage\n\n### init\n\n``` js\nimport { createApp } from 'vue'\nimport uploader from 'vue-simple-uploader'\nimport 'vue-simple-uploader/dist/style.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(uploader)\napp.mount('#app')\n```\n\n### App.vue\n\n``` vue\n\n \n \n \n\n\n\n\n\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://github.com/simple-uploader/Uploader#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(/\\syears?/, '年')\n .replace(/\\days?/, '天')\n .replace(/\\shours?/, '小时')\n .replace(/\\sminutes?/, '分钟')\n .replace(/\\sseconds?/, '秒')\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 // only use response when status is success or error\n \n // eg:\n // return response data ?\n return response.data\n } else {\n return statusTextMap[status]\n }\n }\n ```\n\n* `onFileAdded(file) {Function}`\n \n After `1.0.0`.\n\n Called when file is added, this function is used for file validation. To reject(filter) this file you should `return false`.\n\n* `onFilesAdded(files, fileList) {Function}`\n\n After `1.0.0`.\n\n Called when files are added, this function is used for files validation. To reject(filter) these files you should `return false`.\n\n#### Events\n\nSee [simple-uploader.js uploader/events](https://github.com/simple-uploader/Uploader#events)\n\n**Note:**\n\n* All events name will be transformed by [lodash.kebabCase](https://github.com/lodash/lodash/blob/master/kebabCase.js), eg: `fileSuccess` will be transformed to `file-success`\n\n* `catchAll` event will not be emited.\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\n// Composition API\nconst uploader = ref(null)\n// there will be an uploader attribute on the uploader component, which points to the Uploader instance\nconst uploaderInstance = uploader.value.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#methods\nuploaderInstance.cancel()\n\n//Options API\nconst uploaderInstance = this.$refs.uploader.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#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 / 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\n[npm-image]: https://img.shields.io/npm/v/vue-simple-uploader.svg?style=flat\n[npm-url]: https://npmjs.org/package/vue-simple-uploader\n[downloads-image]: https://img.shields.io/npm/dm/vue-simple-uploader.svg?style=flat\n[downloads-url]: https://npmjs.org/package/vue-simple-uploader\n[juejin-image]: https://img.shields.io/badge/Jue%20Jin-446Likes-blue.svg\n[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail\n\n","readmeFilename":"README.md","gitHead":"388a16679403eadadbe1f6885d55dac9748361bd","_id":"vue-simple-uploader@1.0.3","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-RIghV5rG1CaA41R7VlQP0UG9xevs+cRaCN0k7gH4cFHdG9yIf4206fGKA90NRKzlPxGSBTwLm5dCajLHfqd2+w==","shasum":"d9f67ee7793590722c167a9d8ffe4dee112f8246","tarball":"http://tools.bpmhome.cn:8082/nexus/repository/npm-lc/vue-simple-uploader/-/vue-simple-uploader-1.0.3.tgz","fileCount":29,"unpackedSize":382979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB0CUXoDuextKOs+Zui1vdpC+qDATusqVRUHfTypAxuWAiBHbIQmlHZs4e8yP7fVHJvvBBrfuRsOBjNUO7xyNpxuEw=="}]},"_npmUser":{"name":"dolymood","email":"dolymood@gmail.com"},"directories":{},"maintainers":[{"name":"dolymood","email":"dolymood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-simple-uploader_1.0.3_1715739152412_0.669237408249858"},"_hasShrinkwrap":false}},"name":"vue-simple-uploader","time":{"modified":"2026-04-17T13:29:52.547Z","created":"2017-08-22T09:25:57.528Z","0.0.1":"2017-08-22T09:25:57.528Z","0.0.2":"2017-08-23T02:54:25.911Z","0.0.3":"2017-08-23T09:15:13.308Z","0.0.4":"2017-08-25T01:49:38.764Z","0.0.5":"2017-08-28T08:41:15.488Z","0.1.0":"2017-09-06T10:37:17.771Z","0.2.0":"2017-10-13T02:52:50.942Z","0.2.1":"2017-10-17T16:08:25.014Z","0.3.0":"2017-10-26T04:15:29.378Z","0.4.0":"2017-12-18T13:59:19.638Z","0.4.1":"2018-02-22T03:40:29.108Z","0.4.2":"2018-03-12T14:23:17.433Z","0.4.3":"2018-04-27T03:13:10.415Z","0.4.4":"2018-05-03T06:31:58.685Z","0.4.5":"2018-05-04T02:15:43.649Z","0.4.6":"2018-05-07T02:44:35.249Z","0.5.0":"2018-08-10T00:05:16.941Z","0.5.1":"2018-08-18T06:17:18.773Z","0.5.2":"2018-08-18T06:40:03.423Z","0.5.3":"2018-08-22T08:50:42.688Z","0.5.4":"2018-08-27T03:16:49.026Z","0.5.5":"2018-11-13T09:28:58.188Z","0.5.6":"2018-11-14T05:26:12.298Z","0.6.0":"2019-01-28T07:56:14.358Z","0.7.0":"2019-02-28T08:01:52.127Z","0.7.1":"2019-05-06T08:53:22.737Z","0.7.2":"2019-09-17T07:40:38.210Z","0.7.3":"2019-11-25T13:13:14.196Z","0.7.4":"2019-12-05T03:11:29.640Z","0.7.5":"2020-09-18T03:15:17.755Z","0.7.6":"2020-10-27T09:23:56.579Z","1.0.0-beta.0":"2022-01-05T03:00:40.119Z","1.0.0-beta.1":"2022-01-05T07:24:57.989Z","1.0.0-beta.2":"2022-01-05T07:30:09.901Z","1.0.0-beta.3":"2022-01-05T07:43:09.378Z","1.0.0-beta.4":"2022-01-20T02:58:43.489Z","1.0.0-beta.5":"2022-01-20T03:26:20.481Z","1.0.0":"2023-02-27T05:16:39.650Z","1.0.1":"2023-03-07T08:50:14.324Z","1.0.2":"2023-10-09T09:21:26.308Z","1.0.3":"2024-05-15T02:12:32.658Z"},"readmeFilename":"","_id":"vue-simple-uploader","homepage":"https://github.com/simple-uploader/vue-uploader"}