将主图、图片列表和属性图片的上传方式从手动上传改为自动上传,使用http-request自定义上传处理

src/api/assets/asset/index.ts

@@ -76,7 +76,7 @@ export function uploadAssetImage(file: File) {
 	const formData = new FormData();
 	formData.append('file', file);
 	return newService({
-		url: '/assets/asset/Uploadimage',
+		url: '/assets/asset/uploadImage',
 		method: 'post',
 		data: formData,
 		headers: {

src/views/assets/asset/component/editAsset.vue

@@ -135,9 +135,9 @@
 									<el-upload
 										class="attr-image-uploader"
 										:show-file-list="false"
-										:auto-upload="false"
+										:auto-upload="true"
 										accept="image/*"
-										:on-change="onAttrImageChange(attr)"
+										:http-request="onAttrImageUpload(attr)"
 									>
 										<img
 											v-if="ruleForm.metadata[getAttrKey(attr)]"
@@ -172,8 +172,8 @@
 								<el-upload
 									class="avatar-uploader"
 									:show-file-list="false"
-									:auto-upload="false"
-									:on-change="handleMainImageChange"
+									:auto-upload="true"
+									:http-request="handleMainImageUpload"
 									accept="image/*"
 								>
 									<img v-if="mainImagePreview" :src="mainImagePreview" class="avatar" />
@@ -191,7 +191,8 @@
 							<el-upload
 								v-model:file-list="imageFileList"
 								list-type="picture-card"
-								:auto-upload="false"
+								:auto-upload="true"
+								:http-request="handleImageListUpload"
 								:on-preview="handlePictureCardPreview"
 								:on-remove="handleRemove"
 								accept="image/*"
@@ -445,7 +446,7 @@ import { Plus, Delete } from '@element-plus/icons-vue';
 import { getAsset, createAsset, updateAsset, uploadAssetImage } from '/@/api/assets/asset';
 import { getCategoryTree, getCategory } from '/@/api/assets/category';
 import Editor from '/@/components/editor/index.vue';
-import type { UploadFile, UploadUserFile } from 'element-plus';
+import type { UploadFile, UploadUserFile, UploadRequestOptions } from 'element-plus';
 
 // 类型定义
 interface TimeSlot {
@@ -547,10 +548,8 @@ const getAttrLabel = (attr: CategoryAttr): string => {
 };
 
 // 图片相关
-const mainImageFile = ref<File | null>(null);
 const mainImagePreview = ref('');
 const imageFileList = ref<UploadUserFile[]>([]);
-const attrImageFiles = ref<Record<string, File>>({}); // 暂存属性图片文件
 const dialogVisible = ref(false);
 const dialogImageUrl = ref('');
 // 图片拼接
@@ -674,15 +673,56 @@ const rules: FormRules = {
 };
 
 // 主图上传处理
-const handleMainImageChange = (file: UploadFile) => {
-	if (file.raw) {
-		mainImageFile.value = file.raw;
-		mainImagePreview.value = URL.createObjectURL(file.raw);
-		ruleForm.mainImage = 'set'; // 标记已上传
-		formRef.value?.validateField('mainImage');
+const handleMainImageUpload = async (options: UploadRequestOptions) => {
+	try {
+		const url = await uploadImage(options.file);
+		if (url) {
+			ruleForm.mainImage = url;
+			mainImagePreview.value = formatImageUrl(url);
+			formRef.value?.validateField('mainImage');
+		}
+	} catch (error) {
+		ElMessage.error('主图上传失败');
 	}
 };
 
+// 图片列表上传处理
+const handleImageListUpload = async (options: UploadRequestOptions) => {
+	try {
+		const url = await uploadImage(options.file);
+		if (url) {
+			const fileItem = imageFileList.value.find((f) => f.uid === options.file.uid);
+			if (fileItem) {
+				fileItem.url = formatImageUrl(url);
+				fileItem.status = 'success';
+				fileItem.response = url; // 存储原始 URL
+			}
+		}
+	} catch (error) {
+		ElMessage.error('上传失败');
+		const index = imageFileList.value.findIndex((f) => f.uid === options.file.uid);
+		if (index !== -1) {
+			imageFileList.value.splice(index, 1);
+		}
+	}
+};
+
+// 属性图片上传处理
+const onAttrImageUpload = (attr: CategoryAttr) => {
+	return async (options: UploadRequestOptions) => {
+		try {
+			const url = await uploadImage(options.file);
+			if (url) {
+				const key = getAttrKey(attr);
+				ruleForm.metadata[key] = url;
+				formRef.value?.validateField(`metadata.${key}`);
+			}
+		} catch (error) {
+			ElMessage.error('图片上传失败');
+		}
+	};
+};
+
 // 主图预览
 const previewMainImage = () => {
 	if (mainImagePreview.value) {
@@ -693,7 +733,6 @@ const previewMainImage = () => {
 
 // 主图删除
 const removeMainImage = () => {
-	mainImageFile.value = null;
 	mainImagePreview.value = '';
 	ruleForm.mainImage = '';
 	formRef.value?.validateField('mainImage');
@@ -701,8 +740,6 @@ const removeMainImage = () => {
 
 // 图片列表预览
 const handlePictureCardPreview = (file: UploadFile) => {
-	console.log(file,'111');
-	
 	dialogImageUrl.value = file.url || '';
 	dialogVisible.value = true;
 };
@@ -715,29 +752,10 @@ const handleRemove = (file: UploadFile) => {
 	}
 };
 
-// 属性图片上传处理
-const handleAttrImageChange = (file: UploadFile, attr: CategoryAttr) => {
-	if (file.raw) {
-		const key = getAttrKey(attr);
-		const url = URL.createObjectURL(file.raw);
-		ruleForm.metadata[key] = url;
-		attrImageFiles.value[key] = file.raw;
-		formRef.value?.validateField(`metadata.${key}`);
-	}
-};
-
-// 生成属性图片上传回调
-const onAttrImageChange = (attr: CategoryAttr) => {
-	return (file: UploadFile) => handleAttrImageChange(file, attr);
-};
-
 // 移除属性图片
 const removeAttrImage = (attr: CategoryAttr) => {
 	const key = getAttrKey(attr);
 	ruleForm.metadata[key] = '';
-	if (attrImageFiles.value[key]) {
-		delete attrImageFiles.value[key];
-	}
 	formRef.value?.validateField(`metadata.${key}`);
 };
 
@@ -806,10 +824,8 @@ const removeKeyValuePair = (list: KeyValuePair[], index: number) => {
 const resetForm = () => {
 	const initial = getInitialForm();
 	Object.assign(ruleForm, initial);
-	mainImageFile.value = null;
 	mainImagePreview.value = '';
 	imageFileList.value = [];
-	attrImageFiles.value = {};
 	categoryAttrs.value = [];
 	imgAddressPrefix.value = '';
 };
@@ -1048,21 +1064,19 @@ const buildRequestBody = async (): Promise<any> => {
 		body.offlineTime = ruleForm.offlineTime;
 	}
 
-	// 主图上传
-	if (mainImageFile.value) {
-		body.imageUrl = await uploadImage(mainImageFile.value);
-	} else if (ruleForm.mainImage && !ruleForm.mainImage.startsWith('blob:')) {
+	// 主图 (已在上传时直接赋值给 ruleForm.mainImage)
+	if (ruleForm.mainImage) {
 		body.imageUrl = ruleForm.mainImage;
 	}
 
-	// 图片列表上传
+	// 图片列表
 	const imageUrls: string[] = [];
 	for (const file of imageFileList.value) {
-		if (file.raw) {
-			const url = await uploadImage(file.raw);
-			if (url) imageUrls.push(url);
+		if (file.response) {
+			// 新上传的图片使用原始 URL
+			imageUrls.push(file.response as string);
 		} else if (file.url && !file.url.startsWith('blob:')) {
-			// 已有图片保留原URL
+			// 已有图片保留原 URL
 			imageUrls.push(file.url);
 		}
 	}
@@ -1108,10 +1122,8 @@ const buildRequestBody = async (): Promise<any> => {
 			const key = getAttrKey(attr);
 			let value = ruleForm.metadata[key];
 
-			// 如果是图片类型且有文件需要上传
-			if (attr.type === 'image' && attrImageFiles.value[key]) {
-				value = await uploadImage(attrImageFiles.value[key]);
-			} else if (typeof value === 'string' && value.startsWith('blob:')) {
+			// 如果是图片类型，且值是 blob 开头（未上传成功的情况），置为空
+			if (attr.type === 'image' && typeof value === 'string' && value.startsWith('blob:')) {
 				value = '';
 			}