{"id":13608713,"url":"https://github.com/simple-uploader/vue-uploader","last_synced_at":"2025-05-14T12:10:26.004Z","repository":{"id":37470878,"uuid":"100720798","full_name":"simple-uploader/vue-uploader","owner":"simple-uploader","description":"A Vue.js upload component powered by simple-uploader.js","archived":false,"fork":false,"pushed_at":"2024-05-15T02:17:33.000Z","size":1076,"stargazers_count":2088,"open_issues_count":61,"forks_count":385,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-06T15:54:48.850Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simple-uploader.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-18T14:36:32.000Z","updated_at":"2025-05-06T09:22:19.000Z","dependencies_parsed_at":"2024-01-07T13:01:20.555Z","dependency_job_id":"a9ac51b4-b1c1-407a-aad1-e5f60cd40266","html_url":"https://github.com/simple-uploader/vue-uploader","commit_stats":{"total_commits":114,"total_committers":5,"mean_commits":22.8,"dds":0.06140350877192979,"last_synced_commit":"0be2f9571644ac2f7d3348420baf8fb8105c5555"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simple-uploader%2Fvue-uploader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simple-uploader%2Fvue-uploader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simple-uploader%2Fvue-uploader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simple-uploader%2Fvue-uploader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simple-uploader","download_url":"https://codeload.github.com/simple-uploader/vue-uploader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254140757,"owners_count":22021219,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T19:01:29.397Z","updated_at":"2025-05-14T12:10:25.981Z","avatar_url":"https://github.com/simple-uploader.png","language":"Vue","funding_links":[],"categories":["Vue","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["形成","UI Components","Form"],"readme":"# vue-simple-uploader  [![NPM Version][npm-image]][npm-url] [![NPM Downloads][downloads-image]][downloads-url] [![juejin likes][juejin-image]](juejin-url)\n\n\u003e A Vue.js upload component powered by [simple-uploader.js](https://github.com/simple-uploader/Uploader)\n\n[With vue 3](https://github.com/simple-uploader/vue-uploader/tree/vue3)\n\n![example](https://github.com/simple-uploader/vue-uploader/blob/master/example/simple-uploader.gif)\n\n![QQ](https://github.com/simple-uploader/Uploader/blob/develop/assets/simple-uploader-QQ-3.png?raw=true)\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 --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 Vue from 'vue'\nimport uploader from 'vue-simple-uploader'\nimport App from './App.vue'\n\nVue.use(uploader)\n\n/* eslint-disable no-new */\nnew Vue({\n  render(createElement) {\n    return createElement(App)\n  }\n}).$mount('#app')\n```\n\n### App.vue\n\n``` vue\n\u003ctemplate\u003e\n  \u003cuploader :options=\"options\" class=\"uploader-example\"\u003e\n    \u003cuploader-unsupport\u003e\u003c/uploader-unsupport\u003e\n    \u003cuploader-drop\u003e\n      \u003cp\u003eDrop files here to upload or\u003c/p\u003e\n      \u003cuploader-btn\u003eselect files\u003c/uploader-btn\u003e\n      \u003cuploader-btn :attrs=\"attrs\"\u003eselect images\u003c/uploader-btn\u003e\n      \u003cuploader-btn :directory=\"true\"\u003eselect folder\u003c/uploader-btn\u003e\n    \u003c/uploader-drop\u003e\n    \u003cuploader-list\u003e\u003c/uploader-list\u003e\n  \u003c/uploader\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data () {\n      return {\n        options: {\n          // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js\n          target: '//localhost:3000/upload',\n          testChunks: false\n        },\n        attrs: {\n          accept: 'image/*'\n        }\n      }\n    }\n  }\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  .uploader-example {\n    width: 880px;\n    padding: 15px;\n    margin: 40px auto 0;\n    font-size: 12px;\n    box-shadow: 0 0 10px rgba(0, 0, 0, .4);\n  }\n  .uploader-example .uploader-btn {\n    margin-right: 4px;\n  }\n  .uploader-example .uploader-list {\n    max-height: 440px;\n    overflow: auto;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n\u003c/style\u003e\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\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# build for production and view the bundle analyzer report\nnpm run build --report\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://badge.juejin.im/entry/599dad0ff265da248b04d7b8/likes.svg?style=flat\n[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimple-uploader%2Fvue-uploader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimple-uploader%2Fvue-uploader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimple-uploader%2Fvue-uploader/lists"}