mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-07 17:38:55 +08:00
feat(oss): 优化素材库上传格式限制及组件模式下的 Tab 显示
This commit is contained in:
@@ -137,7 +137,7 @@
|
|||||||
<el-tabs v-model="activeCategoryTab" @tab-change="handleCategoryTabChange">
|
<el-tabs v-model="activeCategoryTab" @tab-change="handleCategoryTabChange">
|
||||||
<el-tab-pane label="图片" name="IMAGE" />
|
<el-tab-pane label="图片" name="IMAGE" />
|
||||||
<el-tab-pane label="视频" name="VIDEO" />
|
<el-tab-pane label="视频" name="VIDEO" />
|
||||||
<el-tab-pane label="文件" name="FILE" />
|
<el-tab-pane v-if="!isComponent" label="文件" name="FILE" />
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-row>
|
<el-row>
|
||||||
@@ -191,6 +191,7 @@
|
|||||||
v-if="canUploadImages"
|
v-if="canUploadImages"
|
||||||
ref="upRef"
|
ref="upRef"
|
||||||
:action="managerApiUrl + '/manager/common/upload/file'"
|
:action="managerApiUrl + '/manager/common/upload/file'"
|
||||||
|
:accept="uploadAccept"
|
||||||
:data="uploadData"
|
:data="uploadData"
|
||||||
:headers="accessToken"
|
:headers="accessToken"
|
||||||
:before-upload="beforeUpload"
|
:before-upload="beforeUpload"
|
||||||
@@ -930,13 +931,16 @@ const canShowGroups = computed(() => {
|
|||||||
return activeRoleTab.value === "MANAGER";
|
return activeRoleTab.value === "MANAGER";
|
||||||
});
|
});
|
||||||
const canUploadImages = computed(() => {
|
const canUploadImages = computed(() => {
|
||||||
return activeRoleTab.value === "MANAGER";
|
return activeRoleTab.value === "MANAGER" && activeCategoryTab.value !== "FILE";
|
||||||
|
});
|
||||||
|
const uploadAccept = computed(() => {
|
||||||
|
if (activeCategoryTab.value === "VIDEO") return "video/*";
|
||||||
|
return "image/*";
|
||||||
});
|
});
|
||||||
const uploadButtonText = computed(() => {
|
const uploadButtonText = computed(() => {
|
||||||
const textMap = {
|
const textMap = {
|
||||||
IMAGE: "上传图片",
|
IMAGE: "上传图片",
|
||||||
VIDEO: "上传视频",
|
VIDEO: "上传视频",
|
||||||
FILE: "上传文件",
|
|
||||||
};
|
};
|
||||||
return textMap[activeCategoryTab.value] || "上传图片";
|
return textMap[activeCategoryTab.value] || "上传图片";
|
||||||
});
|
});
|
||||||
@@ -954,9 +958,22 @@ const uploadData = computed(() => {
|
|||||||
|
|
||||||
function beforeUpload(file) {
|
function beforeUpload(file) {
|
||||||
if (!canUploadImages.value) {
|
if (!canUploadImages.value) {
|
||||||
ElMessage.warning("仅管理员模块支持上传图片");
|
ElMessage.warning("当前模块不支持上传");
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
if (activeCategoryTab.value === "IMAGE") {
|
||||||
|
const isImg = (file?.type && file.type.startsWith("image/")) || /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(file?.name || "");
|
||||||
|
if (!isImg) {
|
||||||
|
ElMessage.warning("请上传图片格式文件");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} else if (activeCategoryTab.value === "VIDEO") {
|
||||||
|
const isVid = (file?.type && file.type.startsWith("video/")) || /\.(mp4|webm|ogg|mov|avi|mkv)$/i.test(file?.name || "");
|
||||||
|
if (!isVid) {
|
||||||
|
ElMessage.warning("请上传视频格式文件");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
const maxSize = 20480 * 1024;
|
const maxSize = 20480 * 1024;
|
||||||
if (file && file.size > maxSize) {
|
if (file && file.size > maxSize) {
|
||||||
handleMaxSize(file);
|
handleMaxSize(file);
|
||||||
@@ -1388,7 +1405,7 @@ function changeFileType() {
|
|||||||
const categoryMap = {
|
const categoryMap = {
|
||||||
pic: "IMAGE",
|
pic: "IMAGE",
|
||||||
video: "VIDEO",
|
video: "VIDEO",
|
||||||
file: "FILE",
|
file: props.isComponent ? "IMAGE" : "FILE",
|
||||||
all: "IMAGE",
|
all: "IMAGE",
|
||||||
};
|
};
|
||||||
const category = categoryMap[fileType.value] || "IMAGE";
|
const category = categoryMap[fileType.value] || "IMAGE";
|
||||||
|
|||||||
@@ -122,6 +122,7 @@
|
|||||||
@click="handleCategoryTabChange('VIDEO')"
|
@click="handleCategoryTabChange('VIDEO')"
|
||||||
>视频</div>
|
>视频</div>
|
||||||
<div
|
<div
|
||||||
|
v-if="!isComponent"
|
||||||
class="oss-tab"
|
class="oss-tab"
|
||||||
:class="{ active: activeCategoryTab === 'FILE' }"
|
:class="{ active: activeCategoryTab === 'FILE' }"
|
||||||
@click="handleCategoryTabChange('FILE')"
|
@click="handleCategoryTabChange('FILE')"
|
||||||
@@ -132,6 +133,7 @@
|
|||||||
v-if="canUploadImages"
|
v-if="canUploadImages"
|
||||||
ref="upRef"
|
ref="upRef"
|
||||||
:action="sellerUrl + '/store/common/upload/file'"
|
:action="sellerUrl + '/store/common/upload/file'"
|
||||||
|
:accept="uploadAccept"
|
||||||
:data="uploadData"
|
:data="uploadData"
|
||||||
:headers="accessToken"
|
:headers="accessToken"
|
||||||
:before-upload="beforeUpload"
|
:before-upload="beforeUpload"
|
||||||
@@ -534,15 +536,18 @@ watch(
|
|||||||
const canShowGroups = computed(() => {
|
const canShowGroups = computed(() => {
|
||||||
return activeRoleTab.value === "STORE";
|
return activeRoleTab.value === "STORE";
|
||||||
});
|
});
|
||||||
// 商家端允许上传图片/视频/文件
|
// 商家端允许上传图片/视频(文件仅在发票上传业务中使用)
|
||||||
const canUploadImages = computed(() => {
|
const canUploadImages = computed(() => {
|
||||||
return activeRoleTab.value === "STORE";
|
return activeRoleTab.value === "STORE" && activeCategoryTab.value !== "FILE";
|
||||||
|
});
|
||||||
|
const uploadAccept = computed(() => {
|
||||||
|
if (activeCategoryTab.value === "VIDEO") return "video/*";
|
||||||
|
return "image/*";
|
||||||
});
|
});
|
||||||
const uploadButtonText = computed(() => {
|
const uploadButtonText = computed(() => {
|
||||||
const textMap = {
|
const textMap = {
|
||||||
IMAGE: "上传图片",
|
IMAGE: "上传图片",
|
||||||
VIDEO: "上传视频",
|
VIDEO: "上传视频",
|
||||||
FILE: "上传文件",
|
|
||||||
};
|
};
|
||||||
return textMap[activeCategoryTab.value] || "上传图片";
|
return textMap[activeCategoryTab.value] || "上传图片";
|
||||||
});
|
});
|
||||||
@@ -563,6 +568,19 @@ function beforeUpload(file) {
|
|||||||
ElMessage.warning("当前模块不支持上传");
|
ElMessage.warning("当前模块不支持上传");
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
if (activeCategoryTab.value === "IMAGE") {
|
||||||
|
const isImg = (file?.type && file.type.startsWith("image/")) || /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(file?.name || "");
|
||||||
|
if (!isImg) {
|
||||||
|
ElMessage.warning("请上传图片格式文件");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} else if (activeCategoryTab.value === "VIDEO") {
|
||||||
|
const isVid = (file?.type && file.type.startsWith("video/")) || /\.(mp4|webm|ogg|mov|avi|mkv)$/i.test(file?.name || "");
|
||||||
|
if (!isVid) {
|
||||||
|
ElMessage.warning("请上传视频格式文件");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
const maxSize = 20480 * 1024;
|
const maxSize = 20480 * 1024;
|
||||||
if (file && file.size > maxSize) {
|
if (file && file.size > maxSize) {
|
||||||
handleMaxSize(file);
|
handleMaxSize(file);
|
||||||
|
|||||||
Reference in New Issue
Block a user