├── .gitignore
├── .npmignore
├── README.md
├── babel.config.js
├── example
    ├── App.vue
    └── main.js
├── lib
    ├── EleUploadVideo.vue
    └── index.js
├── package-lock.json
├── package.json
├── public
    ├── example.gif
    ├── favicon.ico
    └── index.html
├── vue.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | tests
 3 | docs
 4 | documentation
 5 | public
 6 | vue.config.js
 7 | coverage
 8 | jest.config.js
 9 | .eslintrc.js
10 | cypress.json
11 | postcss.config.js
12 | babel.config.js
13 | .editorconfig
14 | .cypress.json
15 | dist/demo.html
16 | .browserslistrc


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-ele-upload-video | 使得视频上传更加容易
  2 | 
  3 | [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg)](https://opensource.org/licenses/mit-license.php)
  4 | [![npm](https://img.shields.io/npm/v/vue-ele-upload-video.svg)](https://www.npmjs.com/package/vue-ele-upload-video)
  5 | [![size](https://img.shields.io/bundlephobia/minzip/vue-ele-upload-video.svg)](https://www.npmjs.com/package/vue-ele-upload-video)
  6 | [![download](https://img.shields.io/npm/dw/vue-ele-upload-video.svg)](https://npmcharts.com/compare/vue-ele-upload-video?minimal=true)
  7 | 
  8 | ## 介绍
  9 | 
 10 | vue-ele-upload-video 对 element-ui 中 upload 组件进一步封装，使得视频上传更加容易
 11 | 
 12 | ## 效果图
 13 | 
 14 | ![效果图](./public/example.gif)
 15 | 
 16 | ## 在线示例
 17 | 
 18 | [https://codepen.io/dream2023/pen/ZNVvBg/](https://codepen.io/dream2023/pen/ZNVvBg/)
 19 | 
 20 | ## 安装
 21 | 
 22 | ```bash
 23 | npm install vue-ele-upload-video --save
 24 | ```
 25 | 
 26 | ## 使用
 27 | 
 28 | ```js
 29 | // 全局引入
 30 | import EleUploadVideo from "vue-ele-upload-video";
 31 | Vue.component(EleUploadVideo.name, EleUploadVideo);
 32 | ```
 33 | 
 34 | ```js
 35 | // 局部引入
 36 | import EleUploadVideo from "vue-ele-upload-video";
 37 | export default {
 38 |   components: {
 39 |     EleUploadVideo
 40 |   }
 41 | };
 42 | ```
 43 | 
 44 | ## 示例(上传到七牛云)
 45 | 
 46 | ```html
 47 | <template>
 48 |   <ele-upload-video
 49 |     :data="{
 50 |       token: token
 51 |     }"
 52 |     :fileSize="20"
 53 |     @error="handleUploadError"
 54 |     :responseFn="handleResponse"
 55 |     style="margin: 50px"
 56 |     action="https://upload.qiniup.com/"
 57 |     v-model="video"
 58 |   />
 59 | </template>
 60 | 
 61 | <script>
 62 |   export default {
 63 |     data() {
 64 |       return {
 65 |         // 上传时需要携带后台请求的token
 66 |         token: "xxxx",
 67 |         video: ""
 68 |       };
 69 |     },
 70 |     methods: {
 71 |       handleUploadError(error) {
 72 |         console.log("error", error);
 73 |       },
 74 |       handleResponse(response) {
 75 |         return "https://www.xxx.com/upload/video/" + response.id;
 76 |       }
 77 |     }
 78 |   };
 79 | </script>
 80 | ```
 81 | 
 82 | ## Props 参数
 83 | 
 84 | ```js
 85 | props: {
 86 |   // 值
 87 |   value: {
 88 |     type: String
 89 |   },
 90 |   // 上传地址
 91 |   action: {
 92 |     type: String,
 93 |     required: true
 94 |   },
 95 |   // 响应处理函数
 96 |   responseFn: Function,
 97 |   // 文件大小限制(Mb)
 98 |   fileSize: {
 99 |     type: Number
100 |   },
101 |   // 显示宽度(px)
102 |   width: {
103 |     type: Number,
104 |     default: 360
105 |   },
106 |   // 显示高度(默认auto)
107 |   height: {
108 |     type: Number
109 |   },
110 |   // 是否显示提示
111 |   isShowTip: {
112 |     type: Boolean,
113 |     default: true
114 |   },
115 |   // 是否显示上传成功的提示
116 |   isShowSuccessTip: {
117 |     type: Boolean,
118 |     default: true,
119 |   },
120 |   // 文件类型
121 |   fileType: {
122 |     type: Array
123 |   },
124 |     // 设置上传的请求头部(同官网)
125 |   headers: Object,
126 |   // 支持发送 cookie 凭证信息 (同官网)
127 |   withCredentials: {
128 |     type: Boolean,
129 |     default: false
130 |   },
131 |   // 上传时附带的额外参数(同官网)
132 |   data: {
133 |     type: Object
134 |   },
135 |   // 上传的文件字段名 (同官网)
136 |   name: {
137 |     type: String,
138 |     default: 'file'
139 |   },
140 |     // 覆盖默认的上传行为，可以自定义上传的实现 (同官网)
141 |   httpRequest: Function,
142 |   // 接受上传的文件类型（thumbnail-mode 模式下此参数无效）(同官网)
143 |   accept: String,
144 |   // 删除前的操作(同官网)
145 |   beforeRemove: Function,
146 | }
147 | ```
148 | 
149 | ## 参考链接
150 | 
151 | - [element-ui upload 组件](https://element.eleme.cn/#/zh-CN/component/upload)
152 | - [element-ui progress 组件](https://element.eleme.cn/#/zh-CN/component/progress)
153 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ele-upload-video
 3 |     :fileSize="20"
 4 |     :responseFn="handleResponse"
 5 |     @error="handleUploadError"
 6 |     action="https://jsonplaceholder.typicode.com/posts/"
 7 |     name="video"
 8 |     style="margin: 50px"
 9 |     v-model="video"
10 |   />
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: 'app',
16 |   data () {
17 |     return {
18 |       video: null
19 |     }
20 |   },
21 |   methods: {
22 |     handleUploadError (error) {
23 |       this.$notify.error({
24 |         title: '上传提示',
25 |         message: '测试环境无法上传文件'
26 |       })
27 |       // eslint-disable-next-line no-console
28 |       console.log('error', error)
29 |     },
30 |     handleResponse({ id }) {
31 |       return 'https://s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v2_30097df.mp4?id=' + id
32 |     }
33 |   }
34 | }
35 | </script>
36 | 
37 | 


--------------------------------------------------------------------------------
/example/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import ElementUI from 'element-ui'
 4 | import EleUploadVideo from '../lib/index'
 5 | import 'element-ui/lib/theme-chalk/index.css'
 6 | 
 7 | Vue.config.productionTip = false
 8 | Vue.use(ElementUI)
 9 | Vue.component(EleUploadVideo.name, EleUploadVideo)
10 | 
11 | new Vue({
12 |   render: h => h(App)
13 | }).$mount('#app')
14 | 


--------------------------------------------------------------------------------
/lib/EleUploadVideo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ele-upload-video">
  3 |     <!-- 上传组件 -->
  4 |     <el-upload
  5 |       :accept="accept"
  6 |       :action="action"
  7 |       :before-upload="handleBeforeUploadVideo"
  8 |       :data="data"
  9 |       :disabled="videoUploadPercent > 0 && videoUploadPercent < 100"
 10 |       :headers="headers"
 11 |       :httpRequest="httpRequest"
 12 |       :name="name"
 13 |       :on-error="handleUploadError"
 14 |       :on-progress="handleUploadProcess"
 15 |       :on-success="handleUploadSuccess"
 16 |       :show-file-list="false"
 17 |       :withCredentials="withCredentials"
 18 |       drag
 19 |       v-if="!value"
 20 |     >
 21 |       <!-- 上传进度 -->
 22 |       <el-progress
 23 |         :percentage="videoUploadPercent"
 24 |         style="margin-top: 20px;"
 25 |         type="circle"
 26 |         v-if="videoUploadPercent > 0"
 27 |       />
 28 | 
 29 |       <!-- 上传提示 -->
 30 |       <template v-else>
 31 |         <i class="el-icon-upload"></i>
 32 |         <div class="el-upload__text">
 33 |           将视频拖到此处，或
 34 |           <em>点击上传</em>
 35 |         </div>
 36 |         <div class="el-upload__tip" slot="tip" v-if="showTip">
 37 |           请上传
 38 |           <span style="color: #f56c6c;"
 39 |             >&nbsp;{{
 40 |               this.fileType ? this.fileType.join("/") : "视频"
 41 |             }}&nbsp;</span
 42 |           >格式文件
 43 |           <template v-if="fileSize">
 44 |             ，且文件大小不超过
 45 |             <span style="color: #f56c6c;">{{ fileSize }}</span
 46 |             >&nbsp;MB
 47 |           </template>
 48 |         </div>
 49 |       </template>
 50 |     </el-upload>
 51 | 
 52 |     <!-- 视频缩略 -->
 53 |     <vue-hover-mask v-if="value">
 54 |       <video
 55 |         :autoplay="false"
 56 |         :src="value"
 57 |         :style="{
 58 |           width: width + 'px',
 59 |           height: height ? height + 'px' : 'auto',
 60 |         }"
 61 |       >
 62 |         您的浏览器不支持视频播放
 63 |       </video>
 64 |       <template v-slot:action>
 65 |         <span @click="handlePlayerVideo" class="ele-upload-video_mask__item">
 66 |           <i class="el-icon-zoom-in"></i>
 67 |         </span>
 68 |         <span @click="handleRemove" class="ele-upload-video_mask__item">
 69 |           <i class="el-icon-delete"></i>
 70 |         </span>
 71 |       </template>
 72 |     </vue-hover-mask>
 73 | 
 74 |     <!-- 弹窗播放 -->
 75 |     <el-dialog :visible.sync="isShowVideo" append-to-body>
 76 |       <video
 77 |         :autoplay="true"
 78 |         :src="value"
 79 |         controls="controls"
 80 |         style="width: 100%;"
 81 |         v-if="isShowVideo"
 82 |       >
 83 |         您的浏览器不支持视频播放
 84 |       </video>
 85 |     </el-dialog>
 86 |   </div>
 87 | </template>
 88 | 
 89 | <script>
 90 | import VueHoverMask from "vue-hover-mask";
 91 | 
 92 | export default {
 93 |   name: "EleUploadVideo",
 94 |   components: {
 95 |     VueHoverMask,
 96 |   },
 97 |   props: {
 98 |     // 值
 99 |     value: {
100 |       type: String,
101 |     },
102 |     // 上传地址
103 |     action: {
104 |       type: String,
105 |       required: true,
106 |     },
107 |     // 响应处理函数
108 |     responseFn: Function,
109 |     // 文件大小限制(Mb)
110 |     fileSize: {
111 |       type: Number,
112 |     },
113 |     // 显示宽度(px)
114 |     width: {
115 |       type: Number,
116 |       default: 360,
117 |     },
118 |     // 显示高度(默认auto)
119 |     height: {
120 |       type: Number,
121 |     },
122 |     // 是否显示提示
123 |     isShowTip: {
124 |       type: Boolean,
125 |       default: true,
126 |     },
127 |     // 是否显示上传成功的提示
128 |     isShowSuccessTip: {
129 |       type: Boolean,
130 |       default: true,
131 |     },
132 |     // 文件类型
133 |     fileType: {
134 |       type: Array,
135 |     },
136 |     // 设置上传的请求头部(同官网)
137 |     headers: Object,
138 |     // 支持发送 cookie 凭证信息 (同官网)
139 |     withCredentials: {
140 |       type: Boolean,
141 |       default: false,
142 |     },
143 |     // 上传时附带的额外参数(同官网)
144 |     data: {
145 |       type: Object,
146 |     },
147 |     // 上传的文件字段名 (同官网)
148 |     name: {
149 |       type: String,
150 |       default: "file",
151 |     },
152 |     // 覆盖默认的上传行为，可以自定义上传的实现 (同官网)
153 |     httpRequest: Function,
154 |     // 接受上传的文件类型（thumbnail-mode 模式下此参数无效）(同官网)
155 |     accept: String,
156 |     // 删除前的操作(同官网)
157 |     beforeRemove: Function,
158 |   },
159 |   data() {
160 |     return {
161 |       isShowVideo: false,
162 |       videoUploadPercent: 0,
163 |     };
164 |   },
165 |   computed: {
166 |     // 是否显示提示
167 |     showTip() {
168 |       return this.isShowTip && (this.fileType || this.fileSize);
169 |     },
170 |   },
171 |   methods: {
172 |     // 上传大小和格式检测
173 |     handleBeforeUploadVideo(file) {
174 |       // 校检格式
175 |       let isVideo = false;
176 |       if (Array.isArray(this.fileType)) {
177 |         const type = file.type.split("/");
178 |         isVideo = type[0] === "video" && this.fileType.includes(type[1]);
179 |       } else {
180 |         isVideo = file.type.includes("video");
181 |       }
182 | 
183 |       if (!isVideo) {
184 |         this.$message.error(`${file.name}格式不正确, 请上传格式正确的视频`);
185 |         return false;
186 |       }
187 | 
188 |       // 校检文件大小
189 |       if (this.fileSize) {
190 |         const isLt = file.size / 1024 / 1024 < this.fileSize;
191 |         if (!isLt) {
192 |           this.$message.error(`上传视频大小不能超过${this.fileSize}MB哦!`);
193 |           return false;
194 |         }
195 |       }
196 |       return true;
197 |     },
198 | 
199 |     // 上传进度
200 |     handleUploadProcess(event, file) {
201 |       this.videoUploadPercent = Number(file.percentage.toFixed(0));
202 |     },
203 | 
204 |     // 上传成功
205 |     handleUploadSuccess(response, file) {
206 |       this.videoUploadPercent = 0;
207 |       if (this.isShowSuccessTip) {
208 |         this.$message.success("上传成功!");
209 |       }
210 |       if (this.responseFn) {
211 |         this.$emit("input", this.responseFn(response, file));
212 |       } else {
213 |         this.$emit("input", response);
214 |       }
215 |     },
216 | 
217 |     // 上传失败
218 |     handleUploadError(err, file, fileList) {
219 |       this.$message.error("上传失败, 请重试!");
220 |       this.videoUploadPercent = 0;
221 |       this.$emit("error", err, file, fileList);
222 |     },
223 | 
224 |     // 删除视频
225 |     doRemove() {
226 |       this.$emit("delete");
227 |       this.$emit("input", null);
228 |     },
229 | 
230 |     handleRemove() {
231 |       if (!this.beforeRemove) {
232 |         this.doRemove();
233 |       } else if (typeof this.beforeRemove === "function") {
234 |         const before = this.beforeRemove(this.value);
235 |         if (before && before.then) {
236 |           before.then(
237 |             () => {
238 |               this.doRemove();
239 |             },
240 |             () => {}
241 |           );
242 |         } else if (before !== false) {
243 |           this.doRemove();
244 |         }
245 |       }
246 |     },
247 |     // 播放视频
248 |     handlePlayerVideo() {
249 |       this.isShowVideo = true;
250 |     },
251 |   },
252 | };
253 | </script>
254 | 
255 | <style>
256 | .ele-upload-video_mask__item {
257 |   padding: 0 10px;
258 | }
259 | 
260 | .ele-upload-video .el-upload__tip {
261 |   line-height: 12px;
262 | }
263 | </style>
264 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | import EleUploadVideo from './EleUploadVideo'
2 | 
3 | if (window && window.Vue) {
4 |   // 浏览器环境
5 |   window.Vue.component(EleUploadVideo.name, EleUploadVideo)
6 | }
7 | 
8 | export default EleUploadVideo
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-ele-upload-video",
 3 |   "description": "vue-ele-upload-video 对 element-ui 中 upload 组件进一步封装，使得视频上传更加容易",
 4 |   "version": "2.0.6",
 5 |   "private": false,
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue build -t lib --name vue-ele-upload-video -d ./dist/ ./lib/index.js",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "https://github.com/dream2023/vue-ele-upload-video"
14 |   },
15 |   "main": "lib/index.js",
16 |   "homepage": "https://github.com/dream2023/vue-ele-upload-video/",
17 |   "keywords": [
18 |     "vue-ele-upload-video",
19 |     "vue",
20 |     "vue video",
21 |     "element",
22 |     "element video",
23 |     "element-ui video"
24 |   ],
25 |   "dependencies": {
26 |     "vue-hover-mask": "^1.0.0"
27 |   },
28 |   "devDependencies": {
29 |     "@vue/cli-plugin-babel": "^3.8.0",
30 |     "@vue/cli-plugin-eslint": "^3.8.0",
31 |     "@vue/cli-service": "^3.8.0",
32 |     "babel-eslint": "^10.0.1",
33 |     "core-js": "^2.6.5",
34 |     "element-ui": "^2.9.1",
35 |     "eslint": "^5.16.0",
36 |     "eslint-plugin-vue": "^5.0.0",
37 |     "vue": "^2.6.10",
38 |     "vue-template-compiler": "^2.6.10"
39 |   },
40 |   "eslintConfig": {
41 |     "root": true,
42 |     "env": {
43 |       "node": true
44 |     },
45 |     "extends": [
46 |       "plugin:vue/essential",
47 |       "eslint:recommended"
48 |     ],
49 |     "rules": {},
50 |     "parserOptions": {
51 |       "parser": "babel-eslint"
52 |     }
53 |   },
54 |   "postcss": {
55 |     "plugins": {
56 |       "autoprefixer": {}
57 |     }
58 |   },
59 |   "browserslist": [
60 |     "> 1%",
61 |     "last 2 versions"
62 |   ]
63 | }
64 | 


--------------------------------------------------------------------------------
/public/example.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dream2023/vue-ele-upload-video/7cf558e99906e5cef3e604060787178540899a2f/public/example.gif


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dream2023/vue-ele-upload-video/7cf558e99906e5cef3e604060787178540899a2f/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-ele-upload-video</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-ele-upload-video doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   css: { extract: false },
 3 |   configureWebpack: {
 4 |     entry: './example/main.js',
 5 |     output: {
 6 |       libraryExport: 'default'
 7 |     }
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------