| | |
| | | </el-form-item> |
| | | <el-form-item prop="url" label="视频" min-width="8"> |
| | | <template v-if="videoList"> |
| | | <video controls v-for="video in videoList" :src="video" :key="video" width="300px" height="200px" /> |
| | | <div class="video-cover" v-for="video in videoList" :key="video"> |
| | | <i v-if="isUpdate" @click="handleDelete(video)" class="el-icon-delete video-delete-icon"></i> |
| | | <video controls :src="video" width="100%" height="100%"/> |
| | | </div> |
| | | </template> |
| | | <el-upload |
| | | v-if="isUpdate" |
| | | class="avatar-uploader" |
| | | action="" |
| | | ref="image" |
| | | limit="4" |
| | | :show-file-list="false" |
| | | :auto-upload="true" |
| | | :http-request="videoUpload"> |
| | |
| | | belongToId: [{ required: true, trigger: 'blur', message: '请输入所属事件编号' }], |
| | | eventSource: [{ required: true, trigger: 'blur', message: '请输入事件来源' }], |
| | | regionName: [{ required: true, trigger: 'blur', message: '请输入社区名称' }], |
| | | id: [{ required: true, trigger: 'blur', message: '请输入图片Id' }], |
| | | id: [{ required: true, trigger: 'blur', message: '请输入视频Id' }], |
| | | category: [{ required: true, trigger: 'blue', message: '请输入问题类型' }], |
| | | url: [{ required: true, validator: validateVideoUrl }], |
| | | type: [{ required: true, trigger: ['blur', 'change'], message: '请选择类型' }] |
| | | }, |
| | | isDisabled: false, |
| | | videoList: null |
| | | videoList: [] |
| | | } |
| | | }, |
| | | |
| | |
| | | formData.append('file', file.file); |
| | | imageManagement.importImage(formData) |
| | | .then(res => { |
| | | this.$refs.image.clearFiles(); |
| | | this.$set(this.videoData, 'url', FILE_ORIGINAL_URL + res.url1); |
| | | const url = res.url1 ?? res.url2 ?? res.url3 ?? res.url4; |
| | | const videoUrl = FILE_ORIGINAL_URL + url; |
| | | this.videoList.push(videoUrl); |
| | | this.$set(this.videoData, 'url', this.videoList.join(',')); |
| | | this.$message.success('上传成功'); |
| | | }) |
| | | .catch(err => { |
| | |
| | | this.$refs.image.clearFiles(); |
| | | }) |
| | | }, |
| | | |
| | | handleDelete(data) { |
| | | this.videoList = this.videoList.filter(item => item !== data); |
| | | this.videoData.url = this.videoList.join(','); |
| | | }, |
| | | |
| | | getResourceType(value) { |
| | | return value ? RESOURCE_TYPE.find(item => item.value === value) : RESOURCE_TYPE; |
| | | } |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | .avatar-uploader .el-upload { |
| | | border: 1px solid #ffffff; |
| | | border-radius: 6px; |
| | | cursor: pointer; |
| | | |
| | | .video-cover { |
| | | height: 169px; |
| | | display: flex; |
| | | } |
| | | |
| | | .video-cover:hover { |
| | | background-color: #ffffff; |
| | | opacity: .6; |
| | | .video-delete-icon { |
| | | display: inline; |
| | | opacity: 1; |
| | | } |
| | | } |
| | | |
| | | .video-delete-icon { |
| | | position: relative; |
| | | overflow: hidden; |
| | | } |
| | | .avatar-uploader .el-upload:hover { |
| | | border-color: #409EFF; |
| | | } |
| | | .avatar-uploader-icon { |
| | | font-size: 14px; |
| | | color: #8c939d; |
| | | width: 50px; |
| | | height: 50px; |
| | | line-height: 50px; |
| | | text-align: center; |
| | | color: red; |
| | | left: calc(100% - 150px); |
| | | top: calc(100% - 95px); |
| | | z-index: 2; |
| | | height: 14px; |
| | | display: none; |
| | | } |
| | | |
| | | .submit-button { |