{"id":16799575,"url":"https://github.com/ejayyoung/vux-uploader-component","last_synced_at":"2025-07-27T18:09:13.986Z","repository":{"id":41070578,"uuid":"148963564","full_name":"eJayYoung/vux-uploader-component","owner":"eJayYoung","description":"a mobile vue component implementation for weui uploader","archived":false,"fork":false,"pushed_at":"2023-03-07T22:17:05.000Z","size":3959,"stargazers_count":100,"open_issues_count":2,"forks_count":41,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T04:47:03.737Z","etag":null,"topics":["uploader","vux","weui"],"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/eJayYoung.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-16T04:36:22.000Z","updated_at":"2024-11-07T14:20:11.000Z","dependencies_parsed_at":"2022-08-29T02:41:13.422Z","dependency_job_id":null,"html_url":"https://github.com/eJayYoung/vux-uploader-component","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/eJayYoung/vux-uploader-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eJayYoung%2Fvux-uploader-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eJayYoung%2Fvux-uploader-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eJayYoung%2Fvux-uploader-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eJayYoung%2Fvux-uploader-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eJayYoung","download_url":"https://codeload.github.com/eJayYoung/vux-uploader-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eJayYoung%2Fvux-uploader-component/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267400376,"owners_count":24081182,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["uploader","vux","weui"],"created_at":"2024-10-13T09:29:08.623Z","updated_at":"2025-07-27T18:09:13.958Z","avatar_url":"https://github.com/eJayYoung.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vux-uploader-component\n\n![](https://www.travis-ci.org/eJayYoung/vux-uploader-component.svg?branch=master)\n\na mobile vue component implementation for [weui](https://weui.io/weui.js/) uploader\n\n## Install\n\n```bash\nnpm install -S vux-uploader-component\n```\n\n## Mobile demo\n\n![](./assets/qrcode.png)\n\n[https://ejayyoung.github.io/vux-uploader-component/index.html](https://ejayyoung.github.io/vux-uploader-component/index.html)\n\n\u003e scan the qrcode and have a test in your device\n\n## Usage\n\n### Basic\n\n```html\n\u003ctemplate\u003e\n  \u003cuploader\n    v-model=\"fileList\"\n    :url=\"remoteUrl\"\n    @on-change=\"onChange\"\n    @on-cancel=\"onCancel\"\n    @on-success=\"onSuccess\"\n    @on-error=\"onError\"\n    @on-delete=\"onDelete\"\n  \u003e\u003c/uploader\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n  import Uploader from \"vux-uploader-component\";\n\n  export default {\n    components: {\n      Uploader\n    },\n    data() {\n      return {\n        fileList: []\n      };\n    }\n  };\n\u003c/script\u003e\n```\n\n### Custom name\n```html\n\u003cuploader\n  v-model=\"fileList\"\n  :url=\"remoteUrl\"\n  name=\"upload\"\n\u003e\u003c/uploader\u003e\n```\n\n### Extra Params\n\n```html\n\u003cuploader\n  v-model=\"fileList\"\n  :url=\"remoteUrl\"\n  :params=\"{\n    token: '13579',\n    linkid: '2323',\n    modelname: 'modelname'\n  }\"\n\u003e\u003c/uploader\u003e\n```\n\n### Manual Upload\n\n```html\n\u003ctemplate\u003e\n  \u003cuploader v-model=\"fileList\" :autoUpload=\"false\"\u003e\u003c/uploader\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n  import Uploader from \"vux-uploader-component\";\n\n  export default {\n    components: {\n      Uploader\n    },\n    data() {\n      return {\n        fileList: []\n      };\n    },\n    methods: {\n      submit() {\n        const formData = new FormData();\n        formData.append(\"file\", fileList[0].blob);\n        fetch\n          .post(url, formData)\n          .then(() =\u003e {})\n          .catch(() =\u003e {});\n      }\n    }\n  };\n\u003c/script\u003e\n```\n\n## Props\n\n| property       | type              | default    | description                                            |\n| -------------- | ----------------- | ---------- | ------------------------------------------------------ |\n| title          | String            | '图片上传' | 组件标题                                               |\n| files          | Array             | []         | 初始化数据源，通过`on-fileList-change`事件绑定 v-model |\n| limit          | Number \\| String  | 5          | 限制上传图片个数                                       |\n| limitPrompt    | Function          | ``(limit) =\u003e `不能上传超过${limit}张图片` `` | 限制上传alert的提示语   |\n| capture        | Number \\| String  | false      | 是否只选择调用相机                                     |\n| enableCompress | Boolean           | true       | 是否压缩                                               |\n| maxWidth       | String \\| Number  | 1024       | 图片压缩最大宽度                                       |\n| quality        | String \\| Number  | 0.92       | 图片压缩率                                             |\n| url            | String            | -          | 上传服务器 url                                         |\n| headers        | Object            | {}         | 上传文件时自定义请求头                                  |\n| withCredentials| Boolean           | -          | 设置为`true`的话，支持标准CORS设置cookie值               |\n| params         | Object            | -          | 上传文件时自定义参数                             |\n| name           | String            | 'file'     | 上传文件时 FormData 的 Key，默认为 file                |\n| autoUpload     | Boolean           | true       | 是否自动开启上传                                       |\n| multiple       | String \\| Boolean | \"\"         | 是否支持多选, `false`为不支持                          |\n| readonly       | Boolean           | false      | 只读模式（隐藏添加和删除按钮）                         |\n\n## Events\n\n| event      | param                  | description                                                                                       |\n| ---------- | ---------------------- | ------------------------------------------------------------------------------------------------- |\n| on-change  | `(FileItem, FileList)` | 选完照片，删除照片时，FileList 变化时触发，返回当前改变的 FileItem，以及当前的 FileList           |\n| on-cancel  | `()`                   | 选择照片后取消的回调，用于错误提示                                                                |\n| on-success | `(result, fileItem)`   | 上传请求成功后的回调，返回远程请求的返回结果，及当前添加文件的 FileItem                           |\n| on-error   | `(xhr)`                | 上传请求失败后的回调，返回`xhr`                                                                   |\n| on-delete  | `(cb)`                 | 删除照片时的回调,返回隐藏 Previewer，删除图片的回调，没监听`onDelete`事件的时候，直接执行删除回调 |\n\n## v-model\n\n通过 v-model 可以在组件外部获取更新的组件的`FileList`\n\n### 返回的 FileItem 格式\n\n目前将 File 对象的属性复制组成 FileItem, FileItem 组成 FileList，便于用户获取 File 对象的信息\n\n```json\n{\n  \"blob\": Blob,\n  \"fetchStatus\": \"success\",\n  \"lastModified\": 1552382376925,\n  \"lastModifiedDate\": \"Tue Mar 12 2019 17:19:36 GMT+0800 (中国标准时间)\",\n  \"name\": \"YourImage.jpeg\",\n  \"progress\": 100,\n  \"size\": 68905,\n  \"type\": \"image/jpeg\",\n  \"url\": \"blob:http://0.0.0.0:8080/e3a87d67-a1dc-4909-b5fa-7bb3a7baad11\"\n}\n```\n\n## Todo\n\n- [x] 调用手机相机\n- [x] 获取图片并渲染到浏览器\n- [x] 解决图片 EXIF 旋转\n- [x] 预览图片\n- [x] 删除图片\n- [x] 支持上传图片配置\n- [x] 显示上传进度\n- [x] 支持多选\n- [x] 支持 v-model 获取 FileList\n- [X] 接入Photoswipe，增强预览功能\n- [X] xhr支持自定义头部和withCredentials\n- [X] 自定义限制alert的提示语内容\n- [ ] 改为vue-cli 3.0 打包\n\n## Development\n\n```bash\n# install dependencies\nnpm install\n\n# serve with hot reload at http://0.0.0.0:8080/\nnpm run dev\n\n# build for production with minification\nnpm run build:prod\n\n# publish package\nnpm version patch\nnpm publish\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n\n## Relevant\n\n- [vux](https://github.com/airyland/vux)\n- [weui](https://github.com/weui/weui)\n- [webpack-simple template](https://github.com/vuejs-templates/webpack-simple)\n\n## License\n\n[The MIT License](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fejayyoung%2Fvux-uploader-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fejayyoung%2Fvux-uploader-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fejayyoung%2Fvux-uploader-component/lists"}