| | |
| | | class="el-upload-list__item-thumbnail" |
| | | :src="file.url" |
| | | alt="" |
| | | style="width: 100%; height: 100%; object-fit: cover;" |
| | | style="width: 147px; height: 147px" |
| | | fit="cover" |
| | | :preview-src-list="[file.url]" |
| | | > |
| | |
| | | <div v-if="uploading1" class="upload-status">正在上传...</div> |
| | | <i v-if="!uploading1" slot="default" class="el-icon-plus"></i> |
| | | <div slot="file" slot-scope="{file}"> |
| | | <img |
| | | <!-- 添加video元素用于显示视频 --> |
| | | <video |
| | | v-if="file.url.includes('.mp4')" |
| | | class="el-upload-list__item-thumbnail" |
| | | :src="file.url" |
| | | style="width: 147px; height: 147px" |
| | | fit="cover" |
| | | ></video> |
| | | <img v-else |
| | | class="el-upload-list__item-thumbnail" |
| | | src="../../assets/401_images/401.gif" |
| | | alt="" |
| | | style="width: 100%; height: 100%; object-fit: cover;" |
| | | fit="cover" |
| | | > |
| | | style="width: 100%; height: 100%" |
| | | fit="cover"> |
| | | |
| | | <span class="el-upload-list__item-actions"> |
| | | <span class="el-upload-list__item-name">{{ file.name }}</span> |
| | | <span |
| | | class="el-upload-list__item-preview" |
| | | @click="handleFileCardPreview(file)" |
| | |
| | | > |
| | | <i class="el-icon-delete"></i> |
| | | </span> |
| | | </span> |
| | | |
| | | </span> |
| | | |
| | | </div> |
| | | |
| | |
| | | this.formData.url = ul+","+uls |
| | | console.log(this.formData.url) |
| | | updateCollection(this.formData).then(response => { |
| | | this.$modal.msgSuccess("文档上传成功"); |
| | | this.$modal.msgSuccess("上传成功"); |
| | | |
| | | const videoElement = document.createElement('video'); // 创建一个新的video元素 |
| | | videoElement.src = response.data.url; // 设置video元素的src为视频URL |
| | | // 监听loadedmetadata事件以确保视频元数据加载完成 |
| | | videoElement.addEventListener('loadedmetadata', function() { |
| | | const canvas = document.createElement('canvas');// 创建一个canvas元素 |
| | | const context = canvas.getContext('2d'); |
| | | context.drawImage(videoElement, 0, 0, canvas.width, canvas.height); // 将视频的首帧画面绘制到画布上 |
| | | const imageURL = canvas.toDataURL();// 将画布转换为图像URL |
| | | videoElement.setAttribute('poster', imageURL);// 设置视频的封面图像 |
| | | |
| | | // 在页面中显示视频元素 |
| | | document.body.appendChild(videoElement); |
| | | }); |
| | | // this.open = false; |
| | | // this.btn=false |
| | | }); |
| | |
| | | font-weight: 400; |
| | | color: #000000; |
| | | } |
| | | .el-upload-list__item-name { |
| | | font-size: 14px; /* 调整文件名字的字体大小 */ |
| | | |
| | | } |
| | | </style> |