优化租户管理文件上传功能,支持FormData格式提交营业执照

src/api/system/tenant/index.ts

@@ -20,19 +20,25 @@ export function getTenant(id: number) {
 
 // 新增租户
 export function addTenant(data: object) {
+	// 如果是 FormData，需要让浏览器自动设置 Content-Type（包含 boundary）
+	const isFormData = data instanceof FormData;
 	return request({
 		url: '/api/v1/system/tenant/add',
 		method: 'post',
 		data: data,
+		headers: isFormData ? { 'Content-Type': undefined } : undefined,
 	});
 }
 
 // 修改租户
 export function editTenant(data: object) {
+	// 如果是 FormData，需要让浏览器自动设置 Content-Type（包含 boundary）
+	const isFormData = data instanceof FormData;
 	return request({
 		url: '/api/v1/system/tenant/edit',
 		method: 'put',
 		data: data,
+		headers: isFormData ? { 'Content-Type': undefined } : undefined,
 	});
 }
 

src/views/system/tenant/component/editTenant.vue

@@ -76,11 +76,11 @@
 									class="avatar-uploader"
 									action="#"
 									:auto-upload="false"
+									:on-change="handleFileChange"
 									:show-file-list="false"
-									:on-change="handleAvatarSuccess"
 									:before-upload="beforeAvatarUpload"
 								>
-									<img v-if="ruleForm.businessLicense" :src="ruleForm.businessLicense" class="avatar" />
+									<img v-if="ruleForm.businessLicense" :src="getUpFileUrl(ruleForm.businessLicense)" class="avatar" />
 									<div v-else class="upload-placeholder">
 										<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
 										<span class="upload-text">点击上传营业执照</span>
@@ -108,6 +108,7 @@ import { ElMessage, UploadProps } from 'element-plus';
 import { Plus } from '@element-plus/icons-vue';
 import { addTenant, editTenant } from '/@/api/system/tenant';
 import { pcTextArr,provinceAndCityData } from 'element-china-area-data';
+import { getUpFileUrl } from '/@/utils/gfast';
 
 // 定义父组件传递的事件
 const emit = defineEmits(['getTenantList']);
@@ -117,6 +118,9 @@ const formRef = ref<HTMLElement | null>(null);
 // 省市数据（使用 element-china-area-data）
 const cityOptions = ref<any[]>([]);
 
+// 单独定义文件对象，避免reactive深层代理导致FormData识别错误
+const fileRaw = ref<any>(null);
+
 const initCityData = () => {
 	const data = JSON.parse(JSON.stringify(provinceAndCityData));
 	cityOptions.value = data.map((item: any) => {
@@ -285,8 +289,25 @@ const onSubmit = () => {
 				submitForm.city = '';
 			}
 
+			// 转换为FormData
+			const formData = new FormData();
+			for (const key in submitForm) {
+				// 如果是文件字段，跳过（后面单独处理）
+				if (key === 'businessLicense') continue; 
+				formData.append(key, submitForm[key]);
+			}
+			// 添加文件
+			if (fileRaw.value) {
+				// 【重要】必须append raw file(二进制文件流)，不能是element-plus的uploadFile包装对象
+				// 否则后端接收到的会是 { uid: ..., status: ... } 这样的json结构
+				formData.append('businessLicense', fileRaw.value);
+			} else if (submitForm.businessLicense && !submitForm.businessLicense.startsWith('blob:')) {
+				// 如果没有新文件，且原值不是blob预览地址，则传递原url字符串
+				formData.append('businessLicense', submitForm.businessLicense);
+			}
+
 			if (state.ruleForm.id === 0) {
-				addTenant(submitForm).then(() => {
+				addTenant(formData).then(() => {
 					ElMessage.success('添加成功');
 					closeDialog();
 					emit('getTenantList');
@@ -294,8 +315,11 @@ const onSubmit = () => {
 			} else {
 				// 过滤掉密码字段，或者后端接口决定是否更新密码
 				// 根据需求，修改时不能修改密码
-				const { password, confirmPassword, tenantAccount, ...rest } = submitForm;
+				if (formData.has('password')) formData.delete('password');
-				editTenant({ ...rest, id: state.ruleForm.id }).then(() => {
+				if (formData.has('confirmPassword')) formData.delete('confirmPassword');
+				if (formData.has('tenantAccount')) formData.delete('tenantAccount');
+
+				editTenant(formData).then(() => {
 					ElMessage.success('修改成功');
 					closeDialog();
 					emit('getTenantList');
@@ -319,11 +343,15 @@ const resetForm = () => {
 		businessLicense: '',
 	};
 	state.passwordStrength = 0;
+	fileRaw.value = null;
 };
 
-// 模拟上传图片
+// 文件改变时触发
-const handleAvatarSuccess: UploadProps['onChange'] = (uploadFile) => {
+const handleFileChange: UploadProps['onChange'] = (uploadFile) => {
-	state.ruleForm.businessLicense = URL.createObjectURL(uploadFile.raw!);
+	if (uploadFile.raw) {
+		fileRaw.value = uploadFile.raw;
+		state.ruleForm.businessLicense = URL.createObjectURL(uploadFile.raw);
+	}
 };
 
 const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {