fix: add bg img

src/pages/SystemCharter/index.vue

@@ -4,7 +4,11 @@
 		<div class="mx-2 my-2">
 			<ElTable :data="dataSource">
 				<el-table-column label="角色背景" width="180">
-					<template></template>
+					<template #default="{ row }">
+						<el-image v-if="row.bg" style="height: 200px" class="ml-4 mt-2" :src="row.bg" :zoom-rate="1.2"
+							:max-scale="7" :min-scale="0.2" :preview-src-list="[row.bg]" :initial-index="4"
+							fit="cover" />
+					</template>
 				</el-table-column>
 				<el-table-column prop="roleName" label="角色名称" />
 				<el-table-column prop="roleSetting" label="角色描述">
@@ -39,7 +43,23 @@
 								<el-button @click="handleBack()">返回</el-button>
 							</div>
 						</el-form-item>
-						<el-form-item label="角色背景"> 待开发... </el-form-item>
+						<el-form-item label="角色背景">
+							<el-upload class="my-4 upload-warpper w-1/2" drag action="#" :show-file-list="false"
+								:before-upload="beforeUpload" :http-request="handleFileUpload">
+								<div class="flex flex-col justify-center items-center">
+									<el-icon class="el-icon--upload">
+										<UploadFilled />
+									</el-icon>
+									<div class="el-upload__text mt-2">点击或拖拽上图片 <span
+											class="text-red-500">(图片建议1920x1920)</span></div>
+								</div>
+							</el-upload>
+							<div v-if="submitForm.bg">
+								<el-image style="height: 200px" class="ml-4 mt-2" :src="submitForm.bg" :zoom-rate="1.2"
+									:max-scale="7" :min-scale="0.2" :preview-src-list="[submitForm.bg]"
+									:initial-index="4" fit="cover" />
+							</div>
+						</el-form-item>
 						<el-form-item label="角色名称" prop="roleName">
 							<el-input v-model="submitForm.roleName" placeholder="请输入角色名称" />
 						</el-form-item>
@@ -91,8 +111,9 @@
 <script lang="ts" setup>
 import { ref, onMounted, reactive, watch } from "vue";
 import { addSystemCharterAPI, querySystemCharterAPI, editSystemCharterAPI } from "@/api/SystemCharter";
-import { ElButton, ElLoading, ElMessage, ElTable, FormInstance, ElPagination } from "element-plus";
-import { Remove } from "@element-plus/icons-vue";
+import { ElButton, ElLoading, ElMessage, ElTable, FormInstance, ElPagination, UploadProps } from "element-plus";
+import { Remove, UploadFilled } from "@element-plus/icons-vue";
+import Oss from "@/utils/oss";
 
 const dataSource = ref([]);
 const paginationInfo = reactive({
@@ -131,6 +152,7 @@ const handleReset = () => {
 		prologue: "", //  角色简介
 		intro: "", // 开场白
 		roleLines: [],
+		bg: ''
 	};
 };
 
@@ -236,4 +258,22 @@ const handleAutoFormat = () => {
 		loading.close();
 	}
 };
+
+const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
+	if (!(rawFile.type.indexOf('image') > -1)) {
+		ElMessage.error("仅支持图片");
+		return false;
+	} else if (rawFile.size / 1024 / 1024 > 3) {
+		ElMessage.error("文件大小不能超过3M");
+		return false;
+	}
+	return true;
+};
+
+const handleFileUpload = async (params) => {
+	const result = await (await Oss).put(`/system-character-bg/${params.file.name}`, params.file)
+	submitForm.value.bg = result.url
+};
+
+
 </script>

src/utils/oss.ts

@@ -0,0 +1,10 @@
+import aliOss from 'ali-oss'
+
+const Oss = new aliOss({
+    region: "oss-cn-shanghai",
+    accessKeyId: "LTAI5tEday8PJNaMTz5mp8g4",
+    accessKeySecret: "ck84eTxx4aSTjornlYrCy8RkurCHfc",
+    bucket: "stayby-static",
+    secure: true,
+});
+export default Oss