diff --git a/src/api/assets/asset/index.ts b/src/api/assets/asset/index.ts index cc9165f..61435dd 100644 --- a/src/api/assets/asset/index.ts +++ b/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: { diff --git a/src/views/assets/asset/component/editAsset.vue b/src/views/assets/asset/component/editAsset.vue index d6e1ce9..0c32c5f 100644 --- a/src/views/assets/asset/component/editAsset.vue +++ b/src/views/assets/asset/component/editAsset.vue @@ -135,9 +135,9 @@ @@ -191,7 +191,8 @@ { }; // 图片相关 -const mainImageFile = ref(null); const mainImagePreview = ref(''); const imageFileList = ref([]); -const attrImageFiles = ref>({}); // 暂存属性图片文件 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 => { 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 => { 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 = ''; }