!1320 调整系统图标通过文件名来取扩展名称（之前取mime对于svg图标存储有问题）

Merge pull request !1320 from WIndy/next

Admin.NET/Admin.NET.Core/Service/Config/Dto/InfoInput.cs

@@ -50,4 +50,8 @@ public class InfoSaveInput
     /// ICP地址
     /// </summary>
     public string SysIcpUrl { get; set; }
+    /// <summary>
+    /// 上传系统图标时的文件名
+    /// </summary>
+    public string SysLogFileName { get; set; }
 }

Admin.NET/Admin.NET.Core/Service/Config/SysConfigService.cs

@@ -277,10 +277,11 @@ public class SysConfigService : IDynamicApiController, ITransient
             var type = groups["type"].Value;
             var base64Data = groups["data"].Value;
             var binData = Convert.FromBase64String(base64Data);
-
+            //根据文件名取扩展名
+            var ext = Path.GetExtension(input.SysLogFileName);
             // 本地图标保存路径
             var path = "Upload";
-            var absoluteFilePath = Path.Combine(App.WebHostEnvironment.WebRootPath, path, $"logo.{type}");
+            var absoluteFilePath = Path.Combine(App.WebHostEnvironment.WebRootPath, path, $"logo{ext}");
 
             // 删除已存在文件
             if (File.Exists(oldSysLogoAbsoluteFilePath))
@@ -295,7 +296,7 @@ public class SysConfigService : IDynamicApiController, ITransient
             await File.WriteAllBytesAsync(absoluteFilePath, binData);
 
             // 保存图标配置
-            var relativeUrl = $"/{path}/logo.{type}";
+            var relativeUrl = $"/{path}/logo{ext}";
             await UpdateConfigValue("sys_web_logo", relativeUrl);
         }
 

Web/src/api-services/models/info-save-input.ts

@@ -83,4 +83,11 @@ export interface InfoSaveInput {
      * @memberof InfoSaveInput
      */
     sysIcpUrl?: string | null;
+    /**
+     * 上传系统图标时的文件名
+     *
+     * @type {string}
+     * @memberof InfoSaveInput
+     */
+    SysLogFileName?: string | null;
 }

Web/src/views/system/infoSetting/index.vue

@@ -1,165 +1,168 @@
 <template>
-	<div>
-		<el-card shadow="hover" v-loading="state.isLoading">
-			<el-descriptions title="系统信息配置" :column="2" :border="true">
-				<template #title>
-					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Setting /> </el-icon> 系统信息配置
-				</template>
-				<el-descriptions-item label="系统图标" :span="2">
-					<!-- <template #label>
+    <div>
+        <el-card shadow="hover" v-loading="state.isLoading">
+            <el-descriptions title="系统信息配置" :column="2" :border="true">
+                <template #title>
+                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Setting /> </el-icon> 系统信息配置
+                </template>
+                <el-descriptions-item label="系统图标" :span="2">
+                    <!-- <template #label>
 						<div class="cell-item">
 							<el-icon><ele-PictureRounded /></el-icon> 系统图标
 						</div>
 					</template> -->
-					<el-upload class="avatar-uploader" :showFileList="false" :autoUpload="false" accept=".jpg,.png,.svg" action="" :limit="1" :onChange="handleUploadChange">
-						<img v-if="state.formData.sysLogo" :src="state.formData.sysLogo" class="avatar" />
-						<SvgIcon v-else class="avatar-uploader-icon" name="ele-Plus" :size="28" />
-					</el-upload>
-				</el-descriptions-item>
-				<el-descriptions-item label="系统主标题">
-					<el-input v-model="state.formData.sysTitle" />
-				</el-descriptions-item>
-				<el-descriptions-item label="系统副标题">
-					<el-input v-model="state.formData.sysViceTitle" />
-				</el-descriptions-item>
-				<el-descriptions-item label="系统描述" :span="2">
-					<el-input v-model="state.formData.sysViceDesc" />
-				</el-descriptions-item>
-				<el-descriptions-item label="水印内容" :span="2">
-					<el-input v-model="state.formData.sysWatermark" />
-				</el-descriptions-item>
-				<el-descriptions-item label="版权说明" :span="2">
-					<el-input v-model="state.formData.sysCopyright" />
-				</el-descriptions-item>
-				<el-descriptions-item label="ICP备案号">
-					<el-input v-model="state.formData.sysIcp" />
-				</el-descriptions-item>
-				<el-descriptions-item label="ICP地址">
-					<el-input v-model="state.formData.sysIcpUrl" />
-				</el-descriptions-item>
-				<template #extra>
-					<el-button type="primary" icon="ele-SuccessFilled" @click="onSave">保存</el-button>
-				</template>
-			</el-descriptions>
-		</el-card>
-	</div>
+                    <el-upload class="avatar-uploader" :name="sysfilename" :showFileList="false" :autoUpload="false" accept=".jpg,.png,.svg" action="" :limit="1" :onChange="handleUploadChange">
+                        <img v-if="state.formData.sysLogo" :src="state.formData.sysLogo" class="avatar" />
+                        <SvgIcon v-else class="avatar-uploader-icon" name="ele-Plus" :size="28" />
+                    </el-upload>
+                </el-descriptions-item>
+                <el-descriptions-item label="系统主标题">
+                    <el-input v-model="state.formData.sysTitle" />
+                </el-descriptions-item>
+                <el-descriptions-item label="系统副标题">
+                    <el-input v-model="state.formData.sysViceTitle" />
+                </el-descriptions-item>
+                <el-descriptions-item label="系统描述" :span="2">
+                    <el-input v-model="state.formData.sysViceDesc" />
+                </el-descriptions-item>
+                <el-descriptions-item label="水印内容" :span="2">
+                    <el-input v-model="state.formData.sysWatermark" />
+                </el-descriptions-item>
+                <el-descriptions-item label="版权说明" :span="2">
+                    <el-input v-model="state.formData.sysCopyright" />
+                </el-descriptions-item>
+                <el-descriptions-item label="ICP备案号">
+                    <el-input v-model="state.formData.sysIcp" />
+                </el-descriptions-item>
+                <el-descriptions-item label="ICP地址">
+                    <el-input v-model="state.formData.sysIcpUrl" />
+                </el-descriptions-item>
+                <template #extra>
+                    <el-button type="primary" icon="ele-SuccessFilled" @click="onSave">保存</el-button>
+                </template>
+            </el-descriptions>
+        </el-card>
+    </div>
 </template>
 
 <script setup lang="ts" name="sysInfoSetting">
-import { nextTick, reactive } from 'vue';
-import { getAPI } from '/@/utils/axios-utils';
-import { SysConfigApi } from '/@/api-services';
-import { ElMessage } from 'element-plus';
-import { fileToBase64 } from '/@/utils/base64Conver';
+    import { nextTick, reactive } from 'vue';
+    import { getAPI } from '/@/utils/axios-utils';
+    import { SysConfigApi } from '/@/api-services';
+    import { ElMessage } from 'element-plus';
+    import { fileToBase64 } from '/@/utils/base64Conver';
 
-const state = reactive({
-	isLoading: false,
-	file: undefined as any,
-	formData: {
-		sysLogoBlob: undefined,
-		sysLogo: '',
-		sysTitle: '',
-		sysViceTitle: '',
-		sysViceDesc: '',
-		sysWatermark: '',
-		sysCopyright: '',
-		sysIcp: '',
-		sysIcpUrl: '',
-	},
-});
+    const state = reactive({
+    	isLoading: false,
+    	file: undefined as any,
+    	formData: {
+    		sysLogoBlob: undefined,
+    		sysLogo: '',
+    		sysTitle: '',
+    		sysViceTitle: '',
+    		sysViceDesc: '',
+    		sysWatermark: '',
+    		sysCopyright: '',
+    		sysIcp: '',
+    		sysIcpUrl: '',
+    	},
+    });
 
-// 通过onChange方法获得文件列表
-const handleUploadChange = (file: any) => {
-	state.file = file;
-	// 改变 sysLogo，显示预览
-	state.formData.sysLogo = URL.createObjectURL(state.file.raw);
-};
+    // 通过onChange方法获得文件列表
+    const handleUploadChange = (file: any) => {
+    	state.file = file;
+    	// 改变 sysLogo，显示预览
+    	state.formData.sysLogo = URL.createObjectURL(state.file.raw);
+    };
 
-// 保存
-const onSave = async () => {
-	// 如果有选择图标，则转换为 base64
-	let sysLogoBase64 = '';
-	if (state.file) {
-		sysLogoBase64 = (await fileToBase64(state.file.raw)) as string;
-	}
+    // 保存
+    const onSave = async () => {
+    	// 如果有选择图标，则转换为 base64
+    	let sysLogoBase64 = '';
+    	let sysLogoFileName = '';
+    	if (state.file) {
+    		sysLogoBase64 = (await fileToBase64(state.file.raw)) as string;
+    		sysLogoFileName = state.file.raw.name;
+    	}
 
-	try {
-		state.isLoading = true;
-		const res = await getAPI(SysConfigApi).apiSysConfigSaveSysInfoPost({
-			sysLogoBase64: sysLogoBase64,
-			sysTitle: state.formData.sysTitle,
-			sysViceTitle: state.formData.sysViceTitle,
-			sysViceDesc: state.formData.sysViceDesc,
-			sysWatermark: state.formData.sysWatermark,
-			sysCopyright: state.formData.sysCopyright,
-			sysIcp: state.formData.sysIcp,
-			sysIcpUrl: state.formData.sysIcpUrl,
-		});
-		if (res.data!.type !== 'success') return;
+    	try {
+    		state.isLoading = true;
+    		const res = await getAPI(SysConfigApi).apiSysConfigSaveSysInfoPost({
+    			sysLogoBase64: sysLogoBase64,
+    			SysLogFileName: sysLogoFileName,
+    			sysTitle: state.formData.sysTitle,
+    			sysViceTitle: state.formData.sysViceTitle,
+    			sysViceDesc: state.formData.sysViceDesc,
+    			sysWatermark: state.formData.sysWatermark,
+    			sysCopyright: state.formData.sysCopyright,
+    			sysIcp: state.formData.sysIcp,
+    			sysIcpUrl: state.formData.sysIcpUrl,
+    		});
+    		if (res.data!.type !== 'success') return;
 
-		// 清空 file 变量
-		state.file = undefined;
-		await loadData();
-		ElMessage.success('保存成功');
-	} finally {
-		nextTick(() => {
-			state.isLoading = false;
-		});
-	}
-};
+    		// 清空 file 变量
+    		state.file = undefined;
+    		await loadData();
+    		ElMessage.success('保存成功');
+    	} finally {
+    		nextTick(() => {
+    			state.isLoading = false;
+    		});
+    	}
+    };
 
-// 加载数据
-const loadData = async () => {
-	try {
-		state.isLoading = true;
-		const res = await getAPI(SysConfigApi).apiSysConfigSysInfoGet();
-		if (res.data!.type !== 'success') return;
+    // 加载数据
+    const loadData = async () => {
+    	try {
+    		state.isLoading = true;
+    		const res = await getAPI(SysConfigApi).apiSysConfigSysInfoGet();
+    		if (res.data!.type !== 'success') return;
 
-		const result = res.data.result;
-		state.formData = {
-			sysLogoBlob: undefined,
-			sysLogo: result.sysLogo,
-			sysTitle: result.sysTitle,
-			sysViceTitle: result.sysViceTitle,
-			sysViceDesc: result.sysViceDesc,
-			sysWatermark: result.sysWatermark,
-			sysCopyright: result.sysCopyright,
-			sysIcp: result.sysIcp,
-			sysIcpUrl: result.sysIcpUrl,
-		};
-	} finally {
-		nextTick(() => {
-			state.isLoading = false;
-		});
-	}
-};
+    		const result = res.data.result;
+    		state.formData = {
+    			sysLogoBlob: undefined,
+    			sysLogo: result.sysLogo,
+    			sysTitle: result.sysTitle,
+    			sysViceTitle: result.sysViceTitle,
+    			sysViceDesc: result.sysViceDesc,
+    			sysWatermark: result.sysWatermark,
+    			sysCopyright: result.sysCopyright,
+    			sysIcp: result.sysIcp,
+    			sysIcpUrl: result.sysIcpUrl,
+    		};
+    	} finally {
+    		nextTick(() => {
+    			state.isLoading = false;
+    		});
+    	}
+    };
 
-loadData();
+    loadData();
 </script>
 
 <style lang="scss" scoped>
-.avatar-uploader .avatar {
-	width: 100px;
-	height: 100px;
-	display: block;
-}
+    .avatar-uploader .avatar {
+    	width: 100px;
+    	height: 100px;
+    	display: block;
+    }
 
-:deep(.avatar-uploader) .el-upload {
-	border: 1px dashed var(--el-border-color);
-	cursor: pointer;
-	position: relative;
-	overflow: hidden;
-	transition: var(--el-transition-duration-fast);
-}
+    :deep(.avatar-uploader) .el-upload {
+    	border: 1px dashed var(--el-border-color);
+    	cursor: pointer;
+    	position: relative;
+    	overflow: hidden;
+    	transition: var(--el-transition-duration-fast);
+    }
 
-:deep(.avatar-uploader) .el-upload:hover {
-	border-color: var(--el-color-primary);
-}
+    :deep(.avatar-uploader) .el-upload:hover {
+    	border-color: var(--el-color-primary);
+    }
 
-.el-icon.avatar-uploader-icon {
-	color: #8c939d;
-	width: 100px;
-	height: 100px;
-	text-align: center;
-}
+    .el-icon.avatar-uploader-icon {
+    	color: #8c939d;
+    	width: 100px;
+    	height: 100px;
+    	text-align: center;
+    }
 </style>