From 880a49e093fbba2c1e39cdd598268766c99082fe Mon Sep 17 00:00:00 2001
From: Tcsm <1377977403@qq.com>
Date: 星期二, 10 十月 2023 20:58:46 +0800
Subject: [PATCH] 加上了成长经历阅历的自传的修改功能，固定序号
---
ruoyi-ui/src/views/collection/collectionInfo.vue | 42 ++++++++++++++++++++++++++++++++++--------
1 files changed, 34 insertions(+), 8 deletions(-)
diff --git a/ruoyi-ui/src/views/collection/collectionInfo.vue b/ruoyi-ui/src/views/collection/collectionInfo.vue
index e26abe7..0d57756 100644
--- a/ruoyi-ui/src/views/collection/collectionInfo.vue
+++ b/ruoyi-ui/src/views/collection/collectionInfo.vue
@@ -96,7 +96,7 @@
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]"
>
@@ -146,14 +146,23 @@
<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)"
@@ -174,8 +183,7 @@
>
<i class="el-icon-delete"></i>
</span>
- </span>
-
+ </span>
</div>
@@ -549,7 +557,21 @@
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'); // 鍒涘缓涓�涓柊鐨剉ideo鍏冪礌
+ videoElement.src = response.data.url; // 璁剧疆video鍏冪礌鐨剆rc涓鸿棰慤RL
+ // 鐩戝惉loadedmetadata浜嬩欢浠ョ‘淇濊棰戝厓鏁版嵁鍔犺浇瀹屾垚
+ videoElement.addEventListener('loadedmetadata', function() {
+ const canvas = document.createElement('canvas');// 鍒涘缓涓�涓猚anvas鍏冪礌
+ 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
});
@@ -592,4 +614,8 @@
font-weight: 400;
color: #000000;
}
+.el-upload-list__item-name {
+ font-size: 14px; /* 璋冩暣鏂囦欢鍚嶅瓧鐨勫瓧浣撳ぇ灏� */
+
+}
</style>
--
Gitblit v1.9.1