| 提交 | 用户 | age | ||
| 3fccf2 | 1 | <template> |
| L | 2 | <div> |
| 3 | <el-upload | |
| 4 | ref="refUploadVideo" | |
| 5 | action="#" | |
| 6 | :before-upload="beforeUploadVideo" | |
| 7 | accept="video/mp4" | |
| 8 | :limit="1" | |
| 9 | :file-list="uploadVideos" | |
| 10 | :on-change="addUploadImg" | |
| 11 | :on-remove="delUploadImg" | |
| 12 | :http-request="reqUploadVideo" | |
| 13 | style="width: 200px" | |
| 14 | > | |
| 15 | <video | |
| 16 | v-if="uploadVideos.length" | |
| 17 | class="com-up-video" | |
| 18 | :src="uploadVideos[0].url" | |
| 19 | controls="controls" | |
| 20 | >您的浏览器不支持视频播放</video> | |
| 21 | <template v-else> | |
| 22 | <i class="el-icon-plus" /> | |
| 23 | <span>选择视频</span> | |
| 24 | </template> | |
| 25 | ||
| 26 | </el-upload> | |
| 27 | </div> | |
| 28 | </template> | |
| 29 | ||
| 30 | <script> | |
| 31 | import mixin_upload from '@/mixins/upload.js' // 通用上传视频预览 | |
| 32 | export default { | |
| 33 | mixins: [mixin_upload], | |
| 34 | model: { | |
| 35 | prop: 'uploadVideos', | |
| 36 | event: 'change' | |
| 37 | }, | |
| 38 | props: { | |
| 39 | uploadVideos: { | |
| 40 | type: Array, | |
| 41 | default: () => { | |
| 42 | return [] | |
| 43 | } | |
| 44 | }, | |
| 45 | accept: { | |
| 46 | type: String, | |
| 47 | default: () => { | |
| 48 | return 'image/jpeg,image/jpg,image/gif,image/png' | |
| 49 | } | |
| 50 | } | |
| 51 | ||
| 52 | }, | |
| 53 | ||
| 54 | data() { | |
| 55 | return { | |
| 56 | callback: null | |
| 57 | } | |
| 58 | }, | |
| 59 | methods: { | |
| 60 | // 上传视频 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ | |
| 61 | // 上传前回调 | |
| 62 | beforeUploadVideo(file) { | |
| 63 | var fileSize = file.size / 1024 / 1024 < 50 | |
| 64 | if (['video/mp4'].indexOf(file.type) === -1) { | |
| 65 | this.$message.error('必须是mp4文件') | |
| 66 | return false | |
| 67 | } | |
| 68 | if (!fileSize) { | |
| 69 | this.$message.error('视频大小不能超过50MB') | |
| 70 | return false | |
| 71 | } | |
| 72 | this.isShowUploadVideo = false | |
| 73 | }, | |
| 74 | // 增加视频 | |
| 75 | addUploadImg(file, fileList) { | |
| 76 | this.$emit('change', fileList) | |
| 77 | }, | |
| 78 | // 删除视频 | |
| 79 | delUploadImg(file, fileList) { | |
| 80 | this.$emit('change', fileList) | |
| 81 | }, | |
| 82 | ||
| 83 | // 上传视频 | |
| 84 | reqUploadVideo(res) { | |
| 85 | const file = res.file | |
| 86 | const formData = new FormData() | |
| 87 | formData.append('file', file) | |
| 88 | this.postFN({ | |
| 89 | url: 'admin/image/upload?type=1', | |
| 90 | header: { 'Content-Type': 'multipart/form-data' }, | |
| 91 | params: formData, | |
| 92 | mockData: { | |
| 93 | code: 100, | |
| 94 | msg: '', | |
| 95 | data: { | |
| 96 | imgUrl: 'https://www.w3school.com.cn/i/movie.mp4' | |
| 97 | } | |
| 98 | } | |
| 99 | }, (inf) => { | |
| 100 | // 替换掉未上传的图片 | |
| 101 | this.$emit('change', [{ name: '视频', url: inf.imgUrl, status: 'success' }]) | |
| 102 | ||
| 103 | console.log('上传视频成功且结束') | |
| 104 | ||
| 105 | // 提交 | |
| 106 | // this.$set(this.dialogData, 'imgUrl', inf.imgUrl) | |
| 107 | this.callback && this.callback(inf.imgUrl) | |
| 108 | }) | |
| 109 | } | |
| 110 | // 上传视频 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ | |
| 111 | } | |
| 112 | } | |
| 113 | </script> | |
| 114 | ||
| 115 | <style> | |
| 116 | .el-upload-list__item{ | |
| 117 | transition: none; | |
| 118 | } | |
| 119 | </style> | |
