图片组件优化

components/imagesUpload.vue

@@ -39,6 +39,7 @@ import { ElImageViewer } from 'element-plus';
 import { getToken } from '../utils/auth';
 import { Plus } from '@element-plus/icons-vue';
 import { artApi } from '../artApi';
+import ArtImage from '../artImage';
 
 export default {
     props: {
@@ -52,12 +53,20 @@ export default {
             default: 'file',
         },
         data: Object,
-        fileList: {
+        imageList: {
+            //文件列表，ArtImage的对象集合
             type: Array,
             default: () => {
                 return [];
             },
-        }, //文件列表，对象数组{fileName:xxx,url:xxx}
+        },
+        /*fileList: {
+            //文件列表，对象数组{fileName:xxx,url:xxx}
+            type: Array,
+            default: () => {
+                return [];
+            },
+        },*/
         maxSize: {
             type: Number,
             default: 9,
@@ -94,10 +103,29 @@ export default {
     components: {
         ElImageViewer,
     },
+    computed: {
+        fileList() {
+            return this.imageList.map((artImage) => {
+                return {
+                    url: artImage.compressionUrl,
+                    artImage: artImage, //自定义属性，保存artImage对象，作用于数据回显
+                };
+            });
+        },
+    },
     created() {
         if (this.data && this.data.id) {
             this.uploadData = this.data;
         }
+
+        /* if (this.imageList.length > 0) {
+            this.fileList = this.imageList.map((artImage) => {
+                return {
+                    url: artImage.compressionUrl,
+                    artImage: artImage, //自定义属性，保存artImage对象，作用于数据回显
+                };
+            });
+        }*/
     },
     methods: {
         submitUpload() {
@@ -110,11 +138,7 @@ export default {
             console.log(fileList, 'remove');
             let _res = [];
             for (let fileItem of fileList) {
-                _res.push({
-                    imgPath: fileItem['imgPath'],
-                    compressionPath: fileItem['compressionPath'],
-                    previewPath: fileItem['previewPath'],
-                });
+                _res.push(fileItem.artImage);
             }
             this.$emit('handleImageRemove', _res);
         },
@@ -130,11 +154,8 @@ export default {
                         if (fileItem.response) {
                             if (fileItem.response.code === 200) {
                                 let data = fileItem.response.data;
-                                this.result.push({
-                                    imgPath: data['img_path'],
-                                    compressionPath: data['compression_path'],
-                                    previewPath: data['preview_path'],
-                                });
+                                let artImage = new ArtImage(data['img_path']);
+                                this.result.push(artImage);
                             } else {
                                 this.$emit('uploadError', fileItem.response);
                                 let uploadFiles = this.$refs['imagesUpload'].uploadFiles;
@@ -143,11 +164,8 @@ export default {
                                 return;
                             }
                         } else {
-                            this.result.push({
-                                imgPath: fileItem['imgPath'],
-                                compressionPath: fileItem['compressionPath'],
-                                previewPath: fileItem['previewPath'],
-                            });
+                            let { artImage } = fileItem;
+                            this.result.push(artImage);
                         }
                     }
                     //移除上传队列