From b34c02590a3253955c3f44a1cbbbf8ba2a786893 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 06 三月 2026 18:01:22 +0800
Subject: [PATCH] 回显问题
---
src/components/imageUpload/index.vue | 1422 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 719 insertions(+), 703 deletions(-)
diff --git a/src/components/imageUpload/index.vue b/src/components/imageUpload/index.vue
index 51e4331..4d9f159 100644
--- a/src/components/imageUpload/index.vue
+++ b/src/components/imageUpload/index.vue
@@ -1,19 +1,21 @@
<template>
<view class="camera-upload">
<!-- 鎷嶇収/鎷嶈棰戞寜閽� -->
- <view v-if="!disabled" class="camera-buttons">
+ <view v-if="!disabled"
+ class="camera-buttons">
<view class="button-row">
- <u-button
- type="primary"
- @click="takePhoto"
- :loading="uploading"
- :disabled="fileList.length >= limit"
- :customStyle="{ marginRight: '10px', flex: 1 }"
- >
- <u-icon name="camera" size="18" color="#fff" style="margin-right: 5px;"></u-icon>
+ <u-button type="primary"
+ @click="takePhoto"
+ :loading="uploading"
+ :disabled="fileList.length >= limit"
+ :customStyle="{ marginRight: '10px', flex: 1 }">
+ <u-icon name="camera"
+ size="18"
+ color="#fff"
+ style="margin-right: 5px;"></u-icon>
{{ uploading ? '涓婁紶涓�...' : '鎷嶇収' }}
</u-button>
- <u-button
+ <!-- <u-button
type="success"
@click="takeVideo"
:loading="uploading"
@@ -22,798 +24,812 @@
>
<u-icon name="video" size="18" color="#fff" style="margin-right: 5px;"></u-icon>
{{ uploading ? '涓婁紶涓�...' : '鎷嶈棰�' }}
- </u-button>
+ </u-button> -->
</view>
</view>
-
<!-- 鎻愮ず淇℃伅 -->
- <view v-if="showTip && !disabled" class="upload-tip">
+ <view v-if="showTip && !disabled"
+ class="upload-tip">
璇蜂娇鐢ㄧ浉鏈�
- <text v-if="fileSize" class="tip-text">
+ <text v-if="fileSize"
+ class="tip-text">
鎷嶆憚澶у皬涓嶈秴杩� <text class="tip-highlight">{{ fileSize }}MB</text>
</text>
鐨�
- <text class="tip-highlight">鐓х墖鎴栬棰�</text>
+ <text class="tip-highlight">鐓х墖</text>
</view>
-
<!-- 濯掍綋鏂囦欢鍒楄〃 -->
<view class="media-list">
- <view
- v-for="(file, index) in fileList"
- :key="file.uid || index"
- class="media-item"
- >
+ <view v-for="(file, index) in fileList"
+ :key="file.uid || index"
+ class="media-item">
<!-- 棰勮鍖哄煙 -->
- <view class="media-preview" @click="previewMedia(file, index)">
- <image
- v-if="file.type === 'image'"
- :src="file.url || file.tempFilePath"
- class="preview-image"
- mode="aspectFill"
- ></image>
- <video
- v-else-if="file.type === 'video'"
- :src="file.url || file.tempFilePath"
- class="preview-video"
- :controls="false"
- ></video>
+ <view class="media-preview"
+ @click="previewMedia(file, index)">
+ <image v-if="file.type === 'image'"
+ :src="file.url || file.tempFilePath"
+ class="preview-image"
+ mode="aspectFill"></image>
+ <video v-else-if="file.type === 'video'"
+ :src="file.url || file.tempFilePath"
+ class="preview-video"
+ :controls="false"></video>
<view class="media-type-icon">
- <u-icon
- :name="file.type === 'image' ? 'photo' : 'video'"
- size="12"
- color="#fff"
- ></u-icon>
+ <u-icon :name="file.type === 'image' ? 'photo' : 'video'"
+ size="12"
+ color="#fff"></u-icon>
</view>
</view>
-
<!-- 鎿嶄綔鎸夐挳 -->
- <view class="media-actions" v-if="!disabled">
- <u-button
- type="error"
- size="mini"
- @click="handleDelete(index)"
- :customStyle="{
+ <view class="media-actions"
+ v-if="!disabled">
+ <u-button type="error"
+ size="mini"
+ @click="handleDelete(index)"
+ :customStyle="{
minWidth: '40px',
height: '24px',
fontSize: '10px',
padding: '0 8px'
- }"
- >
+ }">
鍒犻櫎
</u-button>
</view>
</view>
</view>
-
<!-- 涓婁紶杩涘害 -->
- <view v-if="uploading" class="upload-progress">
- <u-line-progress
- :percentage="uploadProgress"
- :showText="true"
- activeColor="#409eff"
- ></u-line-progress>
+ <view v-if="uploading"
+ class="upload-progress">
+ <u-line-progress :percentage="uploadProgress"
+ :showText="true"
+ activeColor="#409eff"></u-line-progress>
</view>
</view>
</template>
<script setup>
-import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
-import { getToken } from "@/utils/auth";
+ import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
+ import { getToken } from "@/utils/auth";
-// Props 瀹氫箟
-const props = defineProps({
- modelValue: [String, Object, Array],
- action: { type: String, default: "/common/minioUploads" },
- data: { type: Object },
- limit: { type: Number, default: 5 },
- fileSize: { type: Number, default: 10 }, // 榛樿10MB锛岄�傚悎瑙嗛
- fileType: {
- type: Array,
- default: () => ["jpg", "jpeg", "png", "mp4", "mov"]
- },
- isShowTip: { type: Boolean, default: true },
- disabled: { type: Boolean, default: false },
- drag: { type: Boolean, default: false }, // 鎷嶇収涓嶉渶瑕佹嫋鎷�
- statusType: { type: Number, default: "" }, // 鐢ㄤ簬鍖哄垎涓嶅悓鐘舵�佺殑涓婁紶
- maxVideoDuration: { type: Number, default: 30 }, // 鏈�澶ц棰戞椂闀匡紙绉掞級
-});
-
-// 浜嬩欢瀹氫箟
-const emit = defineEmits(['update:modelValue']);
-
-// 鍝嶅簲寮忔暟鎹�
-const number = ref(0);
-const uploadList = ref([]);
-const fileList = ref([]);
-const uploading = ref(false);
-const uploadProgress = ref(0);
-
-// 璁＄畻灞炴��
-const uploadFileUrl = computed(() => {
- // 鑾峰彇鍩虹API鍦板潃锛岄�傞厤uniapp鐜
- let baseUrl = '';
-
- // 灏濊瘯澶氱鏂瑰紡鑾峰彇baseUrl
- if (process.env.VUE_APP_BASE_API) {
- baseUrl = process.env.VUE_APP_BASE_API;
- } else if (process.env.NODE_ENV === 'development') {
- baseUrl = 'http://192.168.1.147:9036';
- } else {
- baseUrl = 'http://192.168.1.147:9036';
- }
-
- const fullUrl = baseUrl + props.action;
- return fullUrl;
-});
-const headers = computed(() => {
- const token = getToken();
- return token ? { Authorization: "Bearer " + token } : {};
-});
-const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize));
-// 鍒濆鍖栧拰缂栬緫鍒濆鍖栨柟娉�
-const init = () => {
- fileList.value = [];
- uploadList.value = [];
- number.value = 0;
-};
-
-const editInit = (val) => {
- fileList.value = [];
- val.storageBlobDTO.forEach((element) => {
- // 纭繚鏂囦欢鏁版嵁鍖呭惈鎵�鏈夊繀瑕佸瓧娈碉紝鍖呮嫭id
- const fileData = {
- ...element,
- id: element.id, // 淇濈暀鏈嶅姟鍣ㄨ繑鍥炵殑id
- url: element.url || element.downloadUrl,
- bucketFilename: element.bucketFilename || element.name,
- downloadUrl: element.downloadUrl || element.url,
- type: element.type || (element.url && element.url.includes('video') ? 'video' : 'image'),
- name: element.name || element.bucketFilename || `鏂囦欢_${Date.now()}`,
- size: element.size || 0,
- createTime: element.createTime || new Date().getTime(),
- uid: element.uid || new Date().getTime() + Math.random()
- };
- fileList.value.push(fileData);
- uploadedSuccessfully();
+ // Props 瀹氫箟
+ const props = defineProps({
+ modelValue: [String, Object, Array],
+ action: { type: String, default: "/common/minioUploads" },
+ data: { type: Object },
+ limit: { type: Number, default: 5 },
+ fileSize: { type: Number, default: 10 }, // 榛樿10MB锛岄�傚悎瑙嗛
+ fileType: {
+ type: Array,
+ default: () => ["jpg", "jpeg", "png", "mp4", "mov"],
+ },
+ isShowTip: { type: Boolean, default: true },
+ disabled: { type: Boolean, default: false },
+ drag: { type: Boolean, default: false }, // 鎷嶇収涓嶉渶瑕佹嫋鎷�
+ statusType: { type: Number, default: "" }, // 鐢ㄤ簬鍖哄垎涓嶅悓鐘舵�佺殑涓婁紶
+ maxVideoDuration: { type: Number, default: 30 }, // 鏈�澶ц棰戞椂闀匡紙绉掞級
});
-};
-// 娴嬭瘯鏈嶅姟鍣ㄨ繛鎺�
-const testServerConnection = () => {
- return new Promise((resolve) => {
- uni.request({
- url: uploadFileUrl.value.replace('/common/minioUploads', '/common/test'),
- method: 'GET',
- timeout: 5000,
- success: (res) => {
- resolve(true);
- },
- fail: (err) => {
- resolve(false);
- }
- });
- });
-};
+ // 浜嬩欢瀹氫箟
+ const emit = defineEmits(["update:modelValue"]);
-// 缁勪欢閿�姣佹椂鐨勬竻鐞�
-onUnmounted(() => {
- // 娓呯悊涓婁紶鐘舵��
- if (uploading.value) {
- uploading.value = false
- }
-
- // 闅愯棌鍙兘鏄剧ず鐨勫姞杞芥彁绀�
- uni.hideLoading()
- uni.hideToast()
-})
+ // 鍝嶅簲寮忔暟鎹�
+ const number = ref(0);
+ const uploadList = ref([]);
+ const fileList = ref([]);
+ const uploading = ref(false);
+ const uploadProgress = ref(0);
-// 鏆撮湶鏂规硶
-defineExpose({ init, editInit, testServerConnection });
+ // 璁＄畻灞炴��
+ const uploadFileUrl = computed(() => {
+ // 鑾峰彇鍩虹API鍦板潃锛岄�傞厤uniapp鐜
+ let baseUrl = "";
-// 鐩戝惉 modelValue 鍙樺寲
-watch(
- () => props.modelValue,
- (val) => {
- if (val) {
- let temp = 1;
- let list = [];
-
- if (Array.isArray(val)) {
- list = val;
- } else if (typeof val === "string") {
- list = val.split(",").map(url => ({ url: url.trim() }));
- }
-
- fileList.value = list.map((item) => {
- if (typeof item === "string") {
- item = { name: item, url: item };
- }
- // 纭繚姣忎釜鏂囦欢閮芥湁蹇呰鐨勫睘鎬э紝鍖呮嫭id
- return {
- ...item,
- id: item.id, // 淇濈暀id瀛楁
- uid: item.uid || new Date().getTime() + temp++,
- type: item.type || (item.url && item.url.includes('video') ? 'video' : 'image'),
- name: item.name || item.bucketFilename || `鏂囦欢_${Date.now()}`,
- size: item.size || 0,
- createTime: item.createTime || new Date().getTime()
- };
- });
+ // 灏濊瘯澶氱鏂瑰紡鑾峰彇baseUrl
+ if (process.env.VUE_APP_BASE_API) {
+ baseUrl = process.env.VUE_APP_BASE_API;
+ } else if (process.env.NODE_ENV === "development") {
+ baseUrl = "http://192.168.1.147:9036";
} else {
- fileList.value = [];
+ baseUrl = "http://192.168.1.147:9036";
}
- },
- { deep: true, immediate: true }
-);
-// 鎷嶇収
-const takePhoto = () => {
- if (fileList.value.length >= props.limit) {
- uni.showToast({
- title: `鏈�澶氬彧鑳芥媿鎽�${props.limit}涓枃浠禶,
- icon: 'none'
+ const fullUrl = baseUrl + props.action;
+ return fullUrl;
+ });
+ const headers = computed(() => {
+ const token = getToken();
+ return token ? { Authorization: "Bearer " + token } : {};
+ });
+ const showTip = computed(
+ () => props.isShowTip && (props.fileType || props.fileSize)
+ );
+ // 鍒濆鍖栧拰缂栬緫鍒濆鍖栨柟娉�
+ const init = () => {
+ fileList.value = [];
+ uploadList.value = [];
+ number.value = 0;
+ };
+
+ const editInit = val => {
+ fileList.value = [];
+ val.storageBlobDTO.forEach(element => {
+ // 纭繚鏂囦欢鏁版嵁鍖呭惈鎵�鏈夊繀瑕佸瓧娈碉紝鍖呮嫭id
+ const fileData = {
+ ...element,
+ id: element.id, // 淇濈暀鏈嶅姟鍣ㄨ繑鍥炵殑id
+ url: element.url || element.downloadUrl,
+ bucketFilename: element.bucketFilename || element.name,
+ downloadUrl: element.downloadUrl || element.url,
+ type:
+ element.type ||
+ (element.url && element.url.includes("video") ? "video" : "image"),
+ name: element.name || element.bucketFilename || `鏂囦欢_${Date.now()}`,
+ size: element.size || 0,
+ createTime: element.createTime || new Date().getTime(),
+ uid: element.uid || new Date().getTime() + Math.random(),
+ };
+ fileList.value.push(fileData);
+ uploadedSuccessfully();
});
- return;
- }
-
- uni.chooseImage({
- count: 1,
- sizeType: ['compressed', 'original'],
- sourceType: ['camera'],
- success: (res) => {
- try {
- if (!res.tempFilePaths || res.tempFilePaths.length === 0) {
- throw new Error('鏈幏鍙栧埌鍥剧墖鏂囦欢');
+ };
+
+ // 娴嬭瘯鏈嶅姟鍣ㄨ繛鎺�
+ const testServerConnection = () => {
+ return new Promise(resolve => {
+ uni.request({
+ url: uploadFileUrl.value.replace("/common/minioUploads", "/common/test"),
+ method: "GET",
+ timeout: 5000,
+ success: res => {
+ resolve(true);
+ },
+ fail: err => {
+ resolve(false);
+ },
+ });
+ });
+ };
+
+ // 缁勪欢閿�姣佹椂鐨勬竻鐞�
+ onUnmounted(() => {
+ // 娓呯悊涓婁紶鐘舵��
+ if (uploading.value) {
+ uploading.value = false;
+ }
+
+ // 闅愯棌鍙兘鏄剧ず鐨勫姞杞芥彁绀�
+ uni.hideLoading();
+ uni.hideToast();
+ });
+
+ // 鏆撮湶鏂规硶
+ defineExpose({ init, editInit, testServerConnection });
+
+ // 鐩戝惉 modelValue 鍙樺寲
+ watch(
+ () => props.modelValue,
+ val => {
+ if (val) {
+ let temp = 1;
+ let list = [];
+
+ if (Array.isArray(val)) {
+ list = val;
+ } else if (typeof val === "string") {
+ list = val.split(",").map(url => ({ url: url.trim() }));
}
-
- const tempFilePath = res.tempFilePaths[0];
- const tempFile = res.tempFiles && res.tempFiles[0] ? res.tempFiles[0] : {};
-
- const file = {
- tempFilePath: tempFilePath,
- type: 'image',
- name: `photo_${Date.now()}.jpg`,
- size: tempFile.size || 0,
- createTime: new Date().getTime(),
- uid: Date.now() + Math.random()
- };
-
- handleBeforeUpload(file);
- } catch (error) {
- console.error('澶勭悊鎷嶇収缁撴灉澶辫触:', error);
- uni.showToast({
- title: '澶勭悊鍥剧墖澶辫触',
- icon: 'error'
+
+ fileList.value = list.map(item => {
+ if (typeof item === "string") {
+ item = { name: item, url: item };
+ }
+ // 纭繚姣忎釜鏂囦欢閮芥湁蹇呰鐨勫睘鎬э紝鍖呮嫭id
+ return {
+ ...item,
+ id: item.id, // 淇濈暀id瀛楁
+ uid: item.uid || new Date().getTime() + temp++,
+ type:
+ item.type ||
+ (item.url && item.url.includes("video") ? "video" : "image"),
+ name: item.name || item.bucketFilename || `鏂囦欢_${Date.now()}`,
+ size: item.size || 0,
+ createTime: item.createTime || new Date().getTime(),
+ };
});
+ } else {
+ fileList.value = [];
}
},
- fail: (err) => {
- console.error('鎷嶇収澶辫触:', err);
- uni.showToast({
- title: '鎷嶇収澶辫触: ' + (err.errMsg || '鏈煡閿欒'),
- icon: 'error'
- });
- }
- });
-};
+ { deep: true, immediate: true }
+ );
-// 鎷嶈棰�
-const takeVideo = () => {
- if (fileList.value.length >= props.limit) {
- uni.showToast({
- title: `鏈�澶氬彧鑳芥媿鎽�${props.limit}涓枃浠禶,
- icon: 'none'
- });
- return;
- }
-
- uni.chooseVideo({
- sourceType: ['camera'],
- maxDuration: props.maxVideoDuration,
- camera: 'back',
- success: (res) => {
- try {
- if (!res.tempFilePath) {
- throw new Error('鏈幏鍙栧埌瑙嗛鏂囦欢');
+ // 鎷嶇収
+ const takePhoto = () => {
+ if (fileList.value.length >= props.limit) {
+ uni.showToast({
+ title: `鏈�澶氬彧鑳芥媿鎽�${props.limit}涓枃浠禶,
+ icon: "none",
+ });
+ return;
+ }
+
+ uni.chooseImage({
+ count: 1,
+ sizeType: ["compressed", "original"],
+ sourceType: ["camera"],
+ success: res => {
+ try {
+ if (!res.tempFilePaths || res.tempFilePaths.length === 0) {
+ throw new Error("鏈幏鍙栧埌鍥剧墖鏂囦欢");
+ }
+
+ const tempFilePath = res.tempFilePaths[0];
+ const tempFile =
+ res.tempFiles && res.tempFiles[0] ? res.tempFiles[0] : {};
+
+ const file = {
+ tempFilePath: tempFilePath,
+ type: "image",
+ name: `photo_${Date.now()}.jpg`,
+ size: tempFile.size || 0,
+ createTime: new Date().getTime(),
+ uid: Date.now() + Math.random(),
+ };
+
+ handleBeforeUpload(file);
+ } catch (error) {
+ console.error("澶勭悊鎷嶇収缁撴灉澶辫触:", error);
+ uni.showToast({
+ title: "澶勭悊鍥剧墖澶辫触",
+ icon: "error",
+ });
}
-
- const file = {
- tempFilePath: res.tempFilePath,
- type: 'video',
- name: `video_${Date.now()}.mp4`,
- size: res.size || 0,
- duration: res.duration || 0,
- createTime: new Date().getTime(),
- uid: Date.now() + Math.random()
- };
-
- handleBeforeUpload(file);
- } catch (error) {
- console.error('澶勭悊鎷嶈棰戠粨鏋滃け璐�:', error);
+ },
+ fail: err => {
+ console.error("鎷嶇収澶辫触:", err);
uni.showToast({
- title: '澶勭悊瑙嗛澶辫触',
- icon: 'error'
+ title: "鎷嶇収澶辫触: " + (err.errMsg || "鏈煡閿欒"),
+ icon: "error",
});
- }
- },
- fail: (err) => {
- console.error('鎷嶈棰戝け璐�:', err);
- uni.showToast({
- title: '鎷嶈棰戝け璐�: ' + (err.errMsg || '鏈煡閿欒'),
- icon: 'error'
- });
- }
- });
-};
+ },
+ });
+ };
-// 鏂囦欢涓婁紶澶勭悊
-const uploadFile = (file) => {
- uploading.value = true;
- uploadProgress.value = 0;
- number.value++; // 澧炲姞涓婁紶璁℃暟
-
- // 纭繚鏂囦欢璺緞姝ｇ‘
- const filePath = file.tempFilePath || file.path;
- if (!filePath) {
- handleUploadError('鏂囦欢璺緞涓嶅瓨鍦�');
- return;
- }
-
- // 纭繚token瀛樺湪
- const token = getToken();
- if (!token) {
- handleUploadError('鐢ㄦ埛鏈櫥褰�');
- return;
- }
-
- // 鍑嗗涓婁紶鍙傛暟
- const uploadParams = {
- url: uploadFileUrl.value,
- filePath: filePath,
- name: 'files',
- formData: {
- type: props.statusType || 0,
- ...(props.data || {})
- },
- header: {
- 'Authorization': `Bearer ${token}`
+ // 鎷嶈棰�
+ const takeVideo = () => {
+ if (fileList.value.length >= props.limit) {
+ uni.showToast({
+ title: `鏈�澶氬彧鑳芥媿鎽�${props.limit}涓枃浠禶,
+ icon: "none",
+ });
+ return;
+ }
+
+ uni.chooseVideo({
+ sourceType: ["camera"],
+ maxDuration: props.maxVideoDuration,
+ camera: "back",
+ success: res => {
+ try {
+ if (!res.tempFilePath) {
+ throw new Error("鏈幏鍙栧埌瑙嗛鏂囦欢");
+ }
+
+ const file = {
+ tempFilePath: res.tempFilePath,
+ type: "video",
+ name: `video_${Date.now()}.mp4`,
+ size: res.size || 0,
+ duration: res.duration || 0,
+ createTime: new Date().getTime(),
+ uid: Date.now() + Math.random(),
+ };
+
+ handleBeforeUpload(file);
+ } catch (error) {
+ console.error("澶勭悊鎷嶈棰戠粨鏋滃け璐�:", error);
+ uni.showToast({
+ title: "澶勭悊瑙嗛澶辫触",
+ icon: "error",
+ });
+ }
+ },
+ fail: err => {
+ console.error("鎷嶈棰戝け璐�:", err);
+ uni.showToast({
+ title: "鎷嶈棰戝け璐�: " + (err.errMsg || "鏈煡閿欒"),
+ icon: "error",
+ });
+ },
+ });
+ };
+
+ // 鏂囦欢涓婁紶澶勭悊
+ const uploadFile = file => {
+ uploading.value = true;
+ uploadProgress.value = 0;
+ number.value++; // 澧炲姞涓婁紶璁℃暟
+
+ // 纭繚鏂囦欢璺緞姝ｇ‘
+ const filePath = file.tempFilePath || file.path;
+ if (!filePath) {
+ handleUploadError("鏂囦欢璺緞涓嶅瓨鍦�");
+ return;
+ }
+
+ // 纭繚token瀛樺湪
+ const token = getToken();
+ if (!token) {
+ handleUploadError("鐢ㄦ埛鏈櫥褰�");
+ return;
+ }
+
+ // 鍑嗗涓婁紶鍙傛暟
+ const uploadParams = {
+ url: uploadFileUrl.value,
+ filePath: filePath,
+ name: "files",
+ formData: {
+ type: props.statusType || 0,
+ ...(props.data || {}),
+ },
+ header: {
+ Authorization: `Bearer ${token}`,
+ },
+ };
+
+ const uploadTask = uni.uploadFile({
+ ...uploadParams,
+ success: res => {
+ try {
+ if (res.statusCode === 200) {
+ const response = JSON.parse(res.data);
+ if (response.code === 200) {
+ handleUploadSuccess(response, file);
+ uni.showToast({
+ title: "涓婁紶鎴愬姛",
+ icon: "success",
+ });
+ emit("update:modelValue", fileList.value);
+ } else {
+ handleUploadError(response.msg || "鏈嶅姟鍣ㄨ繑鍥為敊璇�");
+ }
+ } else {
+ handleUploadError(`鏈嶅姟鍣ㄩ敊璇紝鐘舵�佺爜: ${res.statusCode}`);
+ }
+ } catch (e) {
+ console.error("瑙ｆ瀽鍝嶅簲澶辫触:", e);
+ console.error("鍘熷鍝嶅簲鏁版嵁:", res.data);
+ handleUploadError("鍝嶅簲鏁版嵁瑙ｆ瀽澶辫触: " + e.message);
+ }
+ },
+ fail: err => {
+ console.error("涓婁紶澶辫触:", err.errMsg || err);
+ number.value--; // 涓婁紶澶辫触鏃跺噺灏戣鏁�
+
+ let errorMessage = "涓婁紶澶辫触";
+ if (err.errMsg) {
+ if (err.errMsg.includes("statusCode: null")) {
+ errorMessage = "缃戠粶杩炴帴澶辫触锛岃妫�鏌ョ綉缁滆缃�";
+ } else if (err.errMsg.includes("timeout")) {
+ errorMessage = "涓婁紶瓒呮椂锛岃閲嶈瘯";
+ } else if (err.errMsg.includes("fail")) {
+ errorMessage = "涓婁紶澶辫触锛岃妫�鏌ョ綉缁滆繛鎺�";
+ } else {
+ errorMessage = err.errMsg;
+ }
+ }
+
+ handleUploadError(errorMessage);
+ },
+ complete: () => {
+ uploading.value = false;
+ uploadProgress.value = 0;
+ },
+ });
+
+ // 鐩戝惉涓婁紶杩涘害
+ if (uploadTask && uploadTask.onProgressUpdate) {
+ uploadTask.onProgressUpdate(res => {
+ uploadProgress.value = res.progress;
+ });
}
};
-
- const uploadTask = uni.uploadFile({
- ...uploadParams,
- success: (res) => {
- try {
- if (res.statusCode === 200) {
- const response = JSON.parse(res.data);
- if (response.code === 200) {
- handleUploadSuccess(response, file);
- uni.showToast({
- title: '涓婁紶鎴愬姛',
- icon: 'success'
- });
- emit("update:modelValue", fileList.value);
- } else {
- handleUploadError(response.msg || '鏈嶅姟鍣ㄨ繑鍥為敊璇�');
- }
- } else {
- handleUploadError(`鏈嶅姟鍣ㄩ敊璇紝鐘舵�佺爜: ${res.statusCode}`);
- }
- } catch (e) {
- console.error('瑙ｆ瀽鍝嶅簲澶辫触:', e);
- console.error('鍘熷鍝嶅簲鏁版嵁:', res.data);
- handleUploadError('鍝嶅簲鏁版嵁瑙ｆ瀽澶辫触: ' + e.message);
- }
- },
- fail: (err) => {
- console.error('涓婁紶澶辫触:', err.errMsg || err);
- number.value--; // 涓婁紶澶辫触鏃跺噺灏戣鏁�
-
- let errorMessage = '涓婁紶澶辫触';
- if (err.errMsg) {
- if (err.errMsg.includes('statusCode: null')) {
- errorMessage = '缃戠粶杩炴帴澶辫触锛岃妫�鏌ョ綉缁滆缃�';
- } else if (err.errMsg.includes('timeout')) {
- errorMessage = '涓婁紶瓒呮椂锛岃閲嶈瘯';
- } else if (err.errMsg.includes('fail')) {
- errorMessage = '涓婁紶澶辫触锛岃妫�鏌ョ綉缁滆繛鎺�';
- } else {
- errorMessage = err.errMsg;
- }
- }
-
- handleUploadError(errorMessage);
- },
- complete: () => {
- uploading.value = false;
- uploadProgress.value = 0;
+ // 鑾峰彇濯掍綋鏂囦欢鍚�
+ const getMediaName = file => {
+ if (file.bucketFilename) {
+ return file.bucketFilename.length > 15
+ ? file.bucketFilename.substring(0, 15) + "..."
+ : file.bucketFilename;
}
- });
-
- // 鐩戝惉涓婁紶杩涘害
- if (uploadTask && uploadTask.onProgressUpdate) {
- uploadTask.onProgressUpdate((res) => {
- uploadProgress.value = res.progress;
- });
- }
-};
-// 鑾峰彇濯掍綋鏂囦欢鍚�
-const getMediaName = (file) => {
- if (file.bucketFilename) {
- return file.bucketFilename.length > 15
- ? file.bucketFilename.substring(0, 15) + '...'
- : file.bucketFilename;
- }
- if (file.name) {
- return file.name.length > 15
- ? file.name.substring(0, 15) + '...'
- : file.name;
- }
- return file.type === 'image' ? '鐓х墖' : '瑙嗛';
-};
+ if (file.name) {
+ return file.name.length > 15
+ ? file.name.substring(0, 15) + "..."
+ : file.name;
+ }
+ return file.type === "image" ? "鐓х墖" : "瑙嗛";
+ };
-// 鏍煎紡鍖栨枃浠跺ぇ灏�
-const formatFileSize = (size) => {
- if (!size) return '';
- if (size < 1024) return size + 'B';
- if (size < 1024 * 1024) return (size / 1024).toFixed(1) + 'KB';
- return (size / (1024 * 1024)).toFixed(1) + 'MB';
-};
+ // 鏍煎紡鍖栨枃浠跺ぇ灏�
+ const formatFileSize = size => {
+ if (!size) return "";
+ if (size < 1024) return size + "B";
+ if (size < 1024 * 1024) return (size / 1024).toFixed(1) + "KB";
+ return (size / (1024 * 1024)).toFixed(1) + "MB";
+ };
-// 鏍煎紡鍖栨椂闂�
-const formatTime = (timestamp) => {
- if (!timestamp) return '';
- const date = new Date(timestamp);
- const now = new Date();
- const diff = now - date;
-
- if (diff < 60000) return '鍒氬垰';
- if (diff < 3600000) return Math.floor(diff / 60000) + '鍒嗛挓鍓�';
- if (diff < 86400000) return Math.floor(diff / 3600000) + '灏忔椂鍓�';
-
- return date.toLocaleDateString();
-};
+ // 鏍煎紡鍖栨椂闂�
+ const formatTime = timestamp => {
+ if (!timestamp) return "";
+ const date = new Date(timestamp);
+ const now = new Date();
+ const diff = now - date;
-// 棰勮濯掍綋鏂囦欢
-const previewMedia = (file, index) => {
- if (file.type === 'image') {
- // 棰勮鍥剧墖
- const urls = fileList.value
- .filter(item => item.type === 'image')
- .map(item => item.url || item.tempFilePath);
-
- uni.previewImage({
- urls: urls,
- current: file.url || file.tempFilePath
- });
- } else if (file.type === 'video') {
- // 棰勮瑙嗛
- uni.previewVideo({
- sources: [{
- src: file.url || file.tempFilePath,
- type: 'mp4'
- }],
- current: 0
- });
- }
-};
+ if (diff < 60000) return "鍒氬垰";
+ if (diff < 3600000) return Math.floor(diff / 60000) + "鍒嗛挓鍓�";
+ if (diff < 86400000) return Math.floor(diff / 3600000) + "灏忔椂鍓�";
-// 涓嬭浇鏂囦欢
-const handleDownload = (index) => {
- const file = fileList.value[index];
- const url = file.url || file.downloadUrl;
-
- if (!url) {
- uni.showToast({
- title: '鏂囦欢閾炬帴涓嶅瓨鍦紝鏃犳硶涓嬭浇',
- icon: 'none'
- });
- return;
- }
-
- // 浣跨敤uniapp鐨勪笅杞紸PI
- uni.downloadFile({
- url: url,
- success: (res) => {
- if (res.statusCode === 200) {
- // 淇濆瓨鍒扮浉鍐屾垨鏂囦欢绯荤粺
- uni.saveFile({
- tempFilePath: res.tempFilePath,
- success: (saveRes) => {
- uni.showToast({
- title: '涓嬭浇鎴愬姛',
- icon: 'success'
- });
+ return date.toLocaleDateString();
+ };
+
+ // 棰勮濯掍綋鏂囦欢
+ const previewMedia = (file, index) => {
+ if (file.type === "image") {
+ // 棰勮鍥剧墖
+ const urls = fileList.value
+ .filter(item => item.type === "image")
+ .map(item => item.url || item.tempFilePath);
+
+ uni.previewImage({
+ urls: urls,
+ current: file.url || file.tempFilePath,
+ });
+ } else if (file.type === "video") {
+ // 棰勮瑙嗛
+ uni.previewVideo({
+ sources: [
+ {
+ src: file.url || file.tempFilePath,
+ type: "mp4",
},
- fail: (err) => {
- console.error('淇濆瓨鏂囦欢澶辫触:', err);
- uni.showToast({
- title: '淇濆瓨鏂囦欢澶辫触',
- icon: 'error'
- });
- }
- });
- }
- },
- fail: (err) => {
- console.error('涓嬭浇澶辫触:', err);
- uni.showToast({
- title: '涓嬭浇澶辫触',
- icon: 'error'
+ ],
+ current: 0,
});
}
- });
-};
+ };
-// 妫�鏌ョ綉缁滆繛鎺�
-const checkNetworkConnection = () => {
- return new Promise((resolve) => {
- uni.getNetworkType({
- success: (res) => {
- if (res.networkType === 'none') {
- resolve(false);
- } else {
- resolve(true);
+ // 涓嬭浇鏂囦欢
+ const handleDownload = index => {
+ const file = fileList.value[index];
+ const url = file.url || file.downloadUrl;
+
+ if (!url) {
+ uni.showToast({
+ title: "鏂囦欢閾炬帴涓嶅瓨鍦紝鏃犳硶涓嬭浇",
+ icon: "none",
+ });
+ return;
+ }
+
+ // 浣跨敤uniapp鐨勪笅杞紸PI
+ uni.downloadFile({
+ url: url,
+ success: res => {
+ if (res.statusCode === 200) {
+ // 淇濆瓨鍒扮浉鍐屾垨鏂囦欢绯荤粺
+ uni.saveFile({
+ tempFilePath: res.tempFilePath,
+ success: saveRes => {
+ uni.showToast({
+ title: "涓嬭浇鎴愬姛",
+ icon: "success",
+ });
+ },
+ fail: err => {
+ console.error("淇濆瓨鏂囦欢澶辫触:", err);
+ uni.showToast({
+ title: "淇濆瓨鏂囦欢澶辫触",
+ icon: "error",
+ });
+ },
+ });
}
},
- fail: () => {
- resolve(false);
- }
+ fail: err => {
+ console.error("涓嬭浇澶辫触:", err);
+ uni.showToast({
+ title: "涓嬭浇澶辫触",
+ icon: "error",
+ });
+ },
});
- });
-};
+ };
-// 涓婁紶鍓嶆牎楠�
-const handleBeforeUpload = async (file) => {
// 妫�鏌ョ綉缁滆繛鎺�
- const hasNetwork = await checkNetworkConnection();
- if (!hasNetwork) {
- uni.showToast({
- title: '缃戠粶杩炴帴涓嶅彲鐢紝璇锋鏌ョ綉缁滆缃�',
- icon: 'none'
+ const checkNetworkConnection = () => {
+ return new Promise(resolve => {
+ uni.getNetworkType({
+ success: res => {
+ if (res.networkType === "none") {
+ resolve(false);
+ } else {
+ resolve(true);
+ }
+ },
+ fail: () => {
+ resolve(false);
+ },
+ });
});
- return false;
- }
+ };
- // 鏍￠獙鏂囦欢澶у皬
- if (props.fileSize && file.size) {
- const isLt = file.size / 1024 / 1024 < props.fileSize;
- if (!isLt) {
+ // 涓婁紶鍓嶆牎楠�
+ const handleBeforeUpload = async file => {
+ // 妫�鏌ョ綉缁滆繛鎺�
+ const hasNetwork = await checkNetworkConnection();
+ if (!hasNetwork) {
uni.showToast({
- title: `鏂囦欢澶у皬涓嶈兘瓒呰繃 ${props.fileSize} MB!`,
- icon: 'none'
+ title: "缃戠粶杩炴帴涓嶅彲鐢紝璇锋鏌ョ綉缁滆缃�",
+ icon: "none",
});
return false;
}
- }
- // 鏍￠獙瑙嗛鏃堕暱
- if (file.type === 'video' && file.duration && file.duration > props.maxVideoDuration) {
- uni.showToast({
- title: `瑙嗛鏃堕暱涓嶈兘瓒呰繃 ${props.maxVideoDuration} 绉�!`,
- icon: 'none'
- });
- return false;
- }
-
- // 鏍￠獙鏂囦欢绫诲瀷
- if (props.fileType && Array.isArray(props.fileType) && props.fileType.length > 0) {
- const fileName = file.name || '';
- const fileExtension = fileName ? fileName.split('.').pop().toLowerCase() : '';
-
- // 鏍规嵁鏂囦欢绫诲瀷纭畾鏈熸湜鐨勬墿灞曞悕
- let expectedTypes = [];
- if (file.type === 'image') {
- expectedTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
- } else if (file.type === 'video') {
- expectedTypes = ['mp4', 'mov', 'avi', 'wmv'];
- }
-
- // 妫�鏌ユ枃浠舵墿灞曞悕鏄惁鍦ㄥ厑璁哥殑绫诲瀷涓�
- if (fileExtension && expectedTypes.length > 0) {
- const isAllowed = expectedTypes.some(type =>
- props.fileType.includes(type) && type === fileExtension
- );
-
- if (!isAllowed) {
+ // 鏍￠獙鏂囦欢澶у皬
+ if (props.fileSize && file.size) {
+ const isLt = file.size / 1024 / 1024 < props.fileSize;
+ if (!isLt) {
uni.showToast({
- title: `鏂囦欢鏍煎紡涓嶆敮鎸侊紝璇锋媿鎽� ${expectedTypes.join('/')} 鏍煎紡鐨勬枃浠禶,
- icon: 'none'
+ title: `鏂囦欢澶у皬涓嶈兘瓒呰繃 ${props.fileSize} MB!`,
+ icon: "none",
});
return false;
}
}
- }
- // 鏍￠獙閫氳繃锛屽紑濮嬩笂浼�
- uploadFile(file);
- return true;
-};
+ // 鏍￠獙瑙嗛鏃堕暱
+ if (
+ file.type === "video" &&
+ file.duration &&
+ file.duration > props.maxVideoDuration
+ ) {
+ uni.showToast({
+ title: `瑙嗛鏃堕暱涓嶈兘瓒呰繃 ${props.maxVideoDuration} 绉�!`,
+ icon: "none",
+ });
+ return false;
+ }
-// 涓婁紶澶辫触澶勭悊
-const handleUploadError = (message = '涓婁紶鏂囦欢澶辫触', showRetry = true) => {
- if (showRetry) {
- uni.showModal({
- title: '涓婁紶澶辫触',
- content: message + '锛屾槸鍚﹂噸璇曪紵',
- success: (res) => {
- if (res.confirm) {
- // 鐢ㄦ埛閫夋嫨閲嶈瘯锛岃繖閲屽彲浠ラ噸鏂拌Е鍙戜笂浼�
+ // 鏍￠獙鏂囦欢绫诲瀷
+ if (
+ props.fileType &&
+ Array.isArray(props.fileType) &&
+ props.fileType.length > 0
+ ) {
+ const fileName = file.name || "";
+ const fileExtension = fileName
+ ? fileName.split(".").pop().toLowerCase()
+ : "";
+
+ // 鏍规嵁鏂囦欢绫诲瀷纭畾鏈熸湜鐨勬墿灞曞悕
+ let expectedTypes = [];
+ if (file.type === "image") {
+ expectedTypes = ["jpg", "jpeg", "png", "gif", "webp"];
+ } else if (file.type === "video") {
+ expectedTypes = ["mp4", "mov", "avi", "wmv"];
+ }
+
+ // 妫�鏌ユ枃浠舵墿灞曞悕鏄惁鍦ㄥ厑璁哥殑绫诲瀷涓�
+ if (fileExtension && expectedTypes.length > 0) {
+ const isAllowed = expectedTypes.some(
+ type => props.fileType.includes(type) && type === fileExtension
+ );
+
+ if (!isAllowed) {
+ uni.showToast({
+ title: `鏂囦欢鏍煎紡涓嶆敮鎸侊紝璇锋媿鎽� ${expectedTypes.join("/")} 鏍煎紡鐨勬枃浠禶,
+ icon: "none",
+ });
+ return false;
}
}
- });
- } else {
- uni.showToast({
- title: message,
- icon: 'error'
- });
- }
-};
-
-// 涓婁紶鎴愬姛鍥炶皟
-const handleUploadSuccess = (res, file) => {
- if (res.code === 200 && res.data && Array.isArray(res.data) && res.data.length > 0) {
- const uploadedFile = res.data[0];
- // 纭繚涓婁紶鐨勬枃浠舵暟鎹畬鏁达紝鍖呭惈id
- const fileData = {
- ...file,
- id: uploadedFile.id, // 娣诲姞鏈嶅姟鍣ㄨ繑鍥炵殑id
- url: uploadedFile.url || uploadedFile.downloadUrl,
- bucketFilename: uploadedFile.bucketFilename || file.name,
- downloadUrl: uploadedFile.downloadUrl || uploadedFile.url,
- size: uploadedFile.size || file.size,
- createTime: uploadedFile.createTime || new Date().getTime()
- };
-
- uploadList.value.push(fileData);
- uploadedSuccessfully();
- } else {
- number.value--; // 涓婁紶澶辫触鏃跺噺灏戣鏁�
- handleUploadError(res.msg || '涓婁紶澶辫触');
- }
-};
-
-// 鍒犻櫎鏂囦欢
-const handleDelete = (index) => {
- uni.showModal({
- title: '纭鍒犻櫎',
- content: '纭畾瑕佸垹闄よ繖涓枃浠跺悧锛�',
- success: (res) => {
- if (res.confirm) {
- fileList.value.splice(index, 1);
- emit("update:modelValue", listToString(fileList.value));
- uni.showToast({
- title: '鍒犻櫎鎴愬姛',
- icon: 'success'
- });
- }
}
- });
-};
-// 涓婁紶缁撴潫澶勭悊
-const uploadedSuccessfully = () => {
- if (number.value > 0 && uploadList.value.length === number.value) {
- // 鍚堝苟宸插瓨鍦ㄧ殑鏂囦欢鍜屽垰涓婁紶鐨勬枃浠�
- const existingFiles = fileList.value.filter((f) => f.url !== undefined);
- fileList.value = [...existingFiles, ...uploadList.value];
-
- // 閲嶇疆鐘舵��
- uploadList.value = [];
- number.value = 0;
-
- // 瑙﹀彂鏇存柊浜嬩欢锛屼紶閫掑畬鏁寸殑鏂囦欢鍒楄〃
- emit("update:modelValue", fileList.value);
- }
-};
+ // 鏍￠獙閫氳繃锛屽紑濮嬩笂浼�
+ uploadFile(file);
+ return true;
+ };
-const listToString = (list, separator = ",") => {
- const strs = list
- .filter(item => item.url)
- .map(item => item.url)
- .join(separator);
- return strs;
-};
+ // 涓婁紶澶辫触澶勭悊
+ const handleUploadError = (message = "涓婁紶鏂囦欢澶辫触", showRetry = true) => {
+ if (showRetry) {
+ uni.showModal({
+ title: "涓婁紶澶辫触",
+ content: message + "锛屾槸鍚﹂噸璇曪紵",
+ success: res => {
+ if (res.confirm) {
+ // 鐢ㄦ埛閫夋嫨閲嶈瘯锛岃繖閲屽彲浠ラ噸鏂拌Е鍙戜笂浼�
+ }
+ },
+ });
+ } else {
+ uni.showToast({
+ title: message,
+ icon: "error",
+ });
+ }
+ };
+
+ // 涓婁紶鎴愬姛鍥炶皟
+ const handleUploadSuccess = (res, file) => {
+ if (
+ res.code === 200 &&
+ res.data &&
+ Array.isArray(res.data) &&
+ res.data.length > 0
+ ) {
+ const uploadedFile = res.data[0];
+ // 纭繚涓婁紶鐨勬枃浠舵暟鎹畬鏁达紝鍖呭惈id
+ const fileData = {
+ ...file,
+ id: uploadedFile.id, // 娣诲姞鏈嶅姟鍣ㄨ繑鍥炵殑id
+ url: uploadedFile.url || uploadedFile.downloadUrl,
+ bucketFilename: uploadedFile.bucketFilename || file.name,
+ downloadUrl: uploadedFile.downloadUrl || uploadedFile.url,
+ size: uploadedFile.size || file.size,
+ createTime: uploadedFile.createTime || new Date().getTime(),
+ };
+
+ uploadList.value.push(fileData);
+ uploadedSuccessfully();
+ } else {
+ number.value--; // 涓婁紶澶辫触鏃跺噺灏戣鏁�
+ handleUploadError(res.msg || "涓婁紶澶辫触");
+ }
+ };
+
+ // 鍒犻櫎鏂囦欢
+ const handleDelete = index => {
+ uni.showModal({
+ title: "纭鍒犻櫎",
+ content: "纭畾瑕佸垹闄よ繖涓枃浠跺悧锛�",
+ success: res => {
+ if (res.confirm) {
+ fileList.value.splice(index, 1);
+ emit("update:modelValue", listToString(fileList.value));
+ uni.showToast({
+ title: "鍒犻櫎鎴愬姛",
+ icon: "success",
+ });
+ }
+ },
+ });
+ };
+
+ // 涓婁紶缁撴潫澶勭悊
+ const uploadedSuccessfully = () => {
+ if (number.value > 0 && uploadList.value.length === number.value) {
+ // 鍚堝苟宸插瓨鍦ㄧ殑鏂囦欢鍜屽垰涓婁紶鐨勬枃浠�
+ const existingFiles = fileList.value.filter(f => f.url !== undefined);
+ fileList.value = [...existingFiles, ...uploadList.value];
+
+ // 閲嶇疆鐘舵��
+ uploadList.value = [];
+ number.value = 0;
+
+ // 瑙﹀彂鏇存柊浜嬩欢锛屼紶閫掑畬鏁寸殑鏂囦欢鍒楄〃
+ emit("update:modelValue", fileList.value);
+ }
+ };
+
+ const listToString = (list, separator = ",") => {
+ const strs = list
+ .filter(item => item.url)
+ .map(item => item.url)
+ .join(separator);
+ return strs;
+ };
</script>
<style scoped lang="scss">
-.camera-upload {
- width: 100%;
-}
+ .camera-upload {
+ width: 100%;
+ }
-.camera-buttons {
- margin-bottom: 15px;
-
- .button-row {
+ .camera-buttons {
+ margin-bottom: 15px;
+
+ .button-row {
+ display: flex;
+ gap: 10px;
+ }
+ }
+
+ .upload-tip {
+ font-size: 12px;
+ color: #909399;
+ margin-bottom: 15px;
+ text-align: center;
+ line-height: 1.5;
+
+ .tip-text {
+ margin: 0 2px;
+ }
+
+ .tip-highlight {
+ color: #f56c6c;
+ font-weight: bold;
+ }
+ }
+
+ .media-list {
+ margin-top: 10px;
display: flex;
- gap: 10px;
+ flex-wrap: wrap;
+ gap: 8px;
}
-}
-.upload-tip {
- font-size: 12px;
- color: #909399;
- margin-bottom: 15px;
- text-align: center;
- line-height: 1.5;
-
- .tip-text {
- margin: 0 2px;
+ .media-item {
+ position: relative;
+ width: 80px;
+ height: 80px;
+ border-radius: 8px;
+ overflow: hidden;
+ background-color: #f5f5f5;
+ border: 2px solid #e9ecef;
+ transition: all 0.3s ease;
+
+ &:hover {
+ border-color: #409eff;
+ transform: scale(1.02);
+ }
}
-
- .tip-highlight {
- color: #f56c6c;
- font-weight: bold;
- }
-}
-.media-list {
- margin-top: 10px;
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
-}
-
-.media-item {
- position: relative;
- width: 80px;
- height: 80px;
- border-radius: 8px;
- overflow: hidden;
- background-color: #f5f5f5;
- border: 2px solid #e9ecef;
- transition: all 0.3s ease;
-
- &:hover {
- border-color: #409eff;
- transform: scale(1.02);
- }
-}
-
-.media-preview {
- position: relative;
- width: 100%;
- height: 100%;
- cursor: pointer;
-
- .preview-image, .preview-video {
+ .media-preview {
+ position: relative;
width: 100%;
height: 100%;
- object-fit: cover;
+ cursor: pointer;
+
+ .preview-image,
+ .preview-video {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .media-type-icon {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ width: 20px;
+ height: 20px;
+ background-color: rgba(0, 0, 0, 0.6);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
}
-
- .media-type-icon {
+
+ .media-actions {
position: absolute;
- top: 4px;
- right: 4px;
- width: 20px;
- height: 20px;
- background-color: rgba(0, 0, 0, 0.6);
- border-radius: 50%;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+ padding: 4px;
display: flex;
- align-items: center;
justify-content: center;
- }
-}
+ opacity: 0;
+ transition: opacity 0.3s ease;
-.media-actions {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
- padding: 4px;
- display: flex;
- justify-content: center;
- opacity: 0;
- transition: opacity 0.3s ease;
-
- .media-item:hover & {
- opacity: 1;
+ .media-item:hover & {
+ opacity: 1;
+ }
}
-}
-.upload-progress {
- margin-top: 15px;
- padding: 0 10px;
-}
+ .upload-progress {
+ margin-top: 15px;
+ padding: 0 10px;
+ }
</style>
--
Gitblit v1.9.3