{"id":16908010,"url":"https://github.com/dream2023/vue-ele-upload-video","last_synced_at":"2025-03-17T07:30:38.875Z","repository":{"id":37736035,"uuid":"189740002","full_name":"dream2023/vue-ele-upload-video","owner":"dream2023","description":"通过对 element-ui 中 upload 组件进一步封装，使得视频上传更加容易","archived":false,"fork":false,"pushed_at":"2023-01-03T23:17:09.000Z","size":6238,"stargazers_count":54,"open_issues_count":33,"forks_count":20,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-12T22:19:24.393Z","etag":null,"topics":["element","element-ui","element-ui-video","element-upload-video","element-video","upload-video","vue","vue-video"],"latest_commit_sha":null,"homepage":"https://codepen.io/dream2023/pen/ZNVvBg","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dream2023.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-01T14:06:56.000Z","updated_at":"2025-01-02T01:37:27.000Z","dependencies_parsed_at":"2023-02-01T13:00:35.487Z","dependency_job_id":null,"html_url":"https://github.com/dream2023/vue-ele-upload-video","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-upload-video","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-upload-video/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-upload-video/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-upload-video/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dream2023","download_url":"https://codeload.github.com/dream2023/vue-ele-upload-video/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243847945,"owners_count":20357468,"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":["element","element-ui","element-ui-video","element-upload-video","element-video","upload-video","vue","vue-video"],"created_at":"2024-10-13T18:49:47.795Z","updated_at":"2025-03-17T07:30:38.547Z","avatar_url":"https://github.com/dream2023.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-ele-upload-video | 使得视频上传更加容易\n\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg)](https://opensource.org/licenses/mit-license.php)\n[![npm](https://img.shields.io/npm/v/vue-ele-upload-video.svg)](https://www.npmjs.com/package/vue-ele-upload-video)\n[![size](https://img.shields.io/bundlephobia/minzip/vue-ele-upload-video.svg)](https://www.npmjs.com/package/vue-ele-upload-video)\n[![download](https://img.shields.io/npm/dw/vue-ele-upload-video.svg)](https://npmcharts.com/compare/vue-ele-upload-video?minimal=true)\n\n## 介绍\n\nvue-ele-upload-video 对 element-ui 中 upload 组件进一步封装，使得视频上传更加容易\n\n## 效果图\n\n![效果图](./public/example.gif)\n\n## 在线示例\n\n[https://codepen.io/dream2023/pen/ZNVvBg/](https://codepen.io/dream2023/pen/ZNVvBg/)\n\n## 安装\n\n```bash\nnpm install vue-ele-upload-video --save\n```\n\n## 使用\n\n```js\n// 全局引入\nimport EleUploadVideo from \"vue-ele-upload-video\";\nVue.component(EleUploadVideo.name, EleUploadVideo);\n```\n\n```js\n// 局部引入\nimport EleUploadVideo from \"vue-ele-upload-video\";\nexport default {\n  components: {\n    EleUploadVideo\n  }\n};\n```\n\n## 示例(上传到七牛云)\n\n```html\n\u003ctemplate\u003e\n  \u003cele-upload-video\n    :data=\"{\n      token: token\n    }\"\n    :fileSize=\"20\"\n    @error=\"handleUploadError\"\n    :responseFn=\"handleResponse\"\n    style=\"margin: 50px\"\n    action=\"https://upload.qiniup.com/\"\n    v-model=\"video\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data() {\n      return {\n        // 上传时需要携带后台请求的token\n        token: \"xxxx\",\n        video: \"\"\n      };\n    },\n    methods: {\n      handleUploadError(error) {\n        console.log(\"error\", error);\n      },\n      handleResponse(response) {\n        return \"https://www.xxx.com/upload/video/\" + response.id;\n      }\n    }\n  };\n\u003c/script\u003e\n```\n\n## Props 参数\n\n```js\nprops: {\n  // 值\n  value: {\n    type: String\n  },\n  // 上传地址\n  action: {\n    type: String,\n    required: true\n  },\n  // 响应处理函数\n  responseFn: Function,\n  // 文件大小限制(Mb)\n  fileSize: {\n    type: Number\n  },\n  // 显示宽度(px)\n  width: {\n    type: Number,\n    default: 360\n  },\n  // 显示高度(默认auto)\n  height: {\n    type: Number\n  },\n  // 是否显示提示\n  isShowTip: {\n    type: Boolean,\n    default: true\n  },\n  // 是否显示上传成功的提示\n  isShowSuccessTip: {\n    type: Boolean,\n    default: true,\n  },\n  // 文件类型\n  fileType: {\n    type: Array\n  },\n    // 设置上传的请求头部(同官网)\n  headers: Object,\n  // 支持发送 cookie 凭证信息 (同官网)\n  withCredentials: {\n    type: Boolean,\n    default: false\n  },\n  // 上传时附带的额外参数(同官网)\n  data: {\n    type: Object\n  },\n  // 上传的文件字段名 (同官网)\n  name: {\n    type: String,\n    default: 'file'\n  },\n    // 覆盖默认的上传行为，可以自定义上传的实现 (同官网)\n  httpRequest: Function,\n  // 接受上传的文件类型（thumbnail-mode 模式下此参数无效）(同官网)\n  accept: String,\n  // 删除前的操作(同官网)\n  beforeRemove: Function,\n}\n```\n\n## 参考链接\n\n- [element-ui upload 组件](https://element.eleme.cn/#/zh-CN/component/upload)\n- [element-ui progress 组件](https://element.eleme.cn/#/zh-CN/component/progress)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Fvue-ele-upload-video","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdream2023%2Fvue-ele-upload-video","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Fvue-ele-upload-video/lists"}