| 提交 | 用户 | 时间 | ||
| 759b1c | 1 | <template> |
| H | 2 | <div class="editPage__video"> |
| 3 | <el-upload | |
| 4 | class="uploader" | |
| 5 | list-type="picture-card" | |
| 6 | :action="uploadUrl" | |
| 7 | :on-success="handleSuccess" | |
| 8 | :before-upload="beforeUpload" | |
| 9 | :headers="headers" | |
| 10 | :on-error="handleError" | |
| 11 | :show-file-list="false" | |
| 12 | > | |
| 13 | ||
| 14 | <div v-if="uploadFlag" @mouseenter="mouseover" @mouseleave="mouseout"> | |
| 15 | <i class="el-icon-success success-icon"></i> | |
| 16 | <div :class="{'hide': activeHover, 'success': !activeHover}"> | |
| 17 | <span class="item-actions"> | |
| 18 | <span | |
| 19 | class="item-preview" | |
| 20 | @click.stop="handlePreview()" | |
| 21 | > | |
| 22 | <i class="el-icon-zoom-in"></i> | |
| 23 | </span> | |
| 24 | <span | |
| 25 | class="item-delete" | |
| 26 | @click.stop="handleRemove()" | |
| 27 | > | |
| 28 | <i class="el-icon-delete"></i> | |
| 29 | </span> | |
| 30 | </span> | |
| 31 | </div> | |
| 32 | </div> | |
| 33 | <i v-else-if="uploadFlag === null" class="el-icon-plus uploader-icon"></i> | |
| 34 | <i v-else-if="!uploadFlag" class="el-icon-circle-close uploader-icon" style="color: red"></i> | |
| 35 | </el-upload> | |
| 36 | <!-- 上传提示 --> | |
| 37 | <div class="el-upload__tip" slot="tip" v-if="showTip"> | |
| 38 | 请上传 | |
| 39 | <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template> | |
| 40 | <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template> | |
| 41 | 的文件 | |
| 42 | </div> | |
| 43 | ||
| 44 | <el-dialog :visible.sync="dialogVisible" append-to-body width="800" title="预览"> | |
| 45 | <video width="100%" v-if="videoUrl" controls="controls" :key="menuKey"> | |
| 46 | <source :src="videoUrl" type="video/mp4" /> | |
| 47 | </video> | |
| 48 | </el-dialog> | |
| 49 | ||
| 50 | </div> | |
| 51 | </template> | |
| 52 | ||
| 53 | <script> | |
| 54 | ||
| 55 | import { getAccessToken } from "@/utils/auth"; | |
| 56 | ||
| 57 | export default { | |
| 58 | props: { | |
| 59 | value: [String, Object], | |
| 60 | // 大小限制(MB) | |
| 61 | fileSize: { | |
| 62 | type: Number, | |
| 63 | default: 300, | |
| 64 | }, | |
| 65 | // 文件类型, 例如"video/mp4" | |
| 66 | fileType: { | |
| 67 | type: [String, Array], | |
| 68 | default: () =>["video/mp4"], | |
| 69 | }, | |
| 70 | // 是否显示提示 | |
| 71 | isShowTip: { | |
| 72 | type: Boolean, | |
| 73 | default: true | |
| 74 | } | |
| 75 | }, | |
| 76 | data() { | |
| 77 | return { | |
| 78 | uploadFlag: null, | |
| 79 | activeHover: true, | |
| 80 | dialogVisible: false, | |
| 81 | videoUrl: null, | |
| 82 | // 视频上传 | |
| 83 | uploadUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址 | |
| 84 | headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部 | |
| 85 | // 应付多个组件的情况 记录当前组件的key值 | |
| 86 | menuKey: 1, // 用来强制刷新, | |
| 87 | } | |
| 88 | }, | |
| 89 | watch: { | |
| 90 | value: { | |
| 91 | handler(val) { | |
| 92 | if (val) { | |
| 93 | this.videoUrl = val; | |
| 94 | this.uploadFlag = true; | |
| 95 | } else { | |
| 96 | this.videoUrl = null; | |
| 97 | this.uploadFlag = null; | |
| 98 | } | |
| 99 | }, | |
| 100 | deep: true, | |
| 101 | immediate: true | |
| 102 | } | |
| 103 | }, | |
| 104 | computed: { | |
| 105 | // 是否显示提示 | |
| 106 | showTip() { | |
| 107 | return this.isShowTip && (this.fileType || this.fileSize); | |
| 108 | }, | |
| 109 | }, | |
| 110 | methods: { | |
| 111 | // 上传成功的函数 | |
| 112 | handleSuccess(res) { | |
| 113 | ++this.menuKey; | |
| 114 | if(res.code === 0){ | |
| 115 | this.uploadFlag = true; | |
| 116 | this.videoUrl = res.data; | |
| 117 | this.$emit("input", this.videoUrl); | |
| 118 | }else{ | |
| 119 | this.uploadFlag = false; | |
| 120 | this.$message.error("错误！"+ res.msg); | |
| 121 | } | |
| 122 | }, | |
| 123 | handleError(){ | |
| 124 | this.uploadFlag = false; | |
| 125 | }, | |
| 126 | beforeUpload(file) { | |
| 127 | const isMp4 = this.fileType.includes(file.type); | |
| 128 | const isLt300MB = file.size / 1024 / 1024 < 300; | |
| 129 | if (!isMp4) { | |
| 130 | this.$message.error("视频只能是"+ this.fileType.join("/") +"格式!"); | |
| 131 | } | |
| 132 | if (!isLt300MB) { | |
| 133 | this.$message.error("上传视频大小不能超过 300MB!"); | |
| 134 | } | |
| 135 | return isMp4 && isLt300MB; | |
| 136 | }, | |
| 137 | // 预览 | |
| 138 | handlePreview() { | |
| 139 | this.dialogVisible = true; | |
| 140 | }, | |
| 141 | // 删除视频 | |
| 142 | handleRemove() { | |
| 143 | this.videoUrl = null; | |
| 144 | this.uploadFlag = null; | |
| 145 | this.$emit("input", null); | |
| 146 | }, | |
| 147 | mouseover(){ | |
| 148 | this.activeHover = false; | |
| 149 | }, | |
| 150 | mouseout(){ | |
| 151 | this.activeHover = true; | |
| 152 | } | |
| 153 | } | |
| 154 | } | |
| 155 | </script> | |
| 156 | ||
| 157 | ||
| 158 | <style lang="scss"> | |
| 159 | ||
| 160 | .editPage__video { | |
| 161 | .hide{ | |
| 162 | visibility:hidden; | |
| 163 | } | |
| 164 | .success{ | |
| 165 | position: relative; | |
| 166 | width: 78px; | |
| 167 | height: 78px; | |
| 168 | line-height: 78px; | |
| 169 | background-color: rgba(0,0,0,.5); | |
| 170 | transition: opacity .3s; | |
| 171 | cursor: default; | |
| 172 | ||
| 173 | .item-preview .el-icon-zoom-in{ | |
| 174 | width: 30px; | |
| 175 | font-size: 20px; | |
| 176 | color: #f2f2f2; | |
| 177 | cursor: pointer; | |
| 178 | } | |
| 179 | .item-delete .el-icon-delete{ | |
| 180 | width: 30px; | |
| 181 | font-size: 20px; | |
| 182 | color: #f2f2f2; | |
| 183 | cursor: pointer; | |
| 184 | } | |
| 185 | } | |
| 186 | ||
| 187 | .uploader-icon { | |
| 188 | font-size: 28px; | |
| 189 | color: #8c939d; | |
| 190 | width: 80px; | |
| 191 | height: 80px; | |
| 192 | line-height: 80px; | |
| 193 | text-align: center; | |
| 194 | position: absolute; | |
| 195 | left: 0; | |
| 196 | } | |
| 197 | .success-icon { | |
| 198 | font-size: 28px; | |
| 199 | color: green; | |
| 200 | width: 80px; | |
| 201 | height: 80px; | |
| 202 | line-height: 80px; | |
| 203 | text-align: center; | |
| 204 | position: absolute; | |
| 205 | left: 0; | |
| 206 | } | |
| 207 | ||
| 208 | .el-upload{ | |
| 209 | width: 80px; | |
| 210 | height: 80px; | |
| 211 | } | |
| 212 | ||
| 213 | } | |
| 214 | </style> | |
