新增影像图库

src/api/website/imageLibrary/index.js

 import fetch from 'utils/fetch';
-
+//获取影像图库列表
 export function page(query) {
   return fetch({
     url: '/api/website/imageImgStorage/getList',
@@ -7,7 +7,7 @@ export function page(query) {
     params: query
   });
 }
-
+//新增或修改影像图库
 export function update(query) {
   return fetch({
     url: '/api/website/imageImgStorage/addUpdate',
@@ -15,3 +15,19 @@ export function update(query) {
     data: query
   });
 }
+//获取所有相似图像
+export function getAll(query) {
+  return fetch({
+    url: '/api/website/imageInfoRelation/getAll',
+    method: 'get',
+    params: query
+  });
+}
+///api/website/imageImgStorage/getDetail/{id}
+export function getDetail(query) {
+  return fetch({
+    url: `/api/website/imageImgStorage/getDetail/${query}`,
+    method: 'get'
+  });
+}
+

src/components/Upload/singleImageX.vue

 <template>
   <div class="upload-container">
     <el-upload
-    v-show="!imageUrl"
-      ref="upload"
+      v-show="!value"
+      :ref="refName"
       drag
       v-loading="uploading"
       action="#"
@@ -14,9 +14,9 @@
       <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
       <div class="el-upload__text">只能上传1个文件</div>
     </el-upload>
-    <div class="image-preview" v-show="imageUrl">
+    <div class="image-preview" v-show="value">
       <div class="image-preview-wrapper">
-        <img :src="imageUrl" />
+        <img :src="value" />
         <div class="image-preview-action">
           <i @click="rmImage" class="el-icon-delete"></i>
         </div>
@@ -29,12 +29,16 @@
 // 预览效果见专题
 import { uploadFile } from "@/api/website/newsCategory/index";
 export default {
-  name: "singleImageUpload2",
+  name: "singleImageX",
   props: {
+    refName: {
+      type: String,
+      default: 'upload'
+    },
     //图片地址
     value: {
       type: String,
-      default: "",
+      default: () => "",
     },
   },
   data() {
@@ -42,26 +46,29 @@ export default {
       uploading: false
     };
   },
-  computed: {
-    imageUrl() {
-      return (!!this.value) ? this.value : ""
-    }
-  },
   methods: {
     //删除图片
     rmImage() {
-      this.$refs.upload.clearFiles()
-      this.emitFunc("");
+      this.$refs[this.refName].clearFiles()
+      this.emitFunc("", null);
     },
     //上传请求
     onUploadRequest(data) {
       this.uploading = true;
       let fileObj = data.file;
-      console.log(data)
+
+      //获取图片详情信息
+      let imgInfo = {};
       let temp = URL.createObjectURL(fileObj)
       let img = new Image();
       img.src = temp;
-      console.log(img.width, img.height)
+      img.onload = function () {
+        imgInfo.width = img.width;
+        imgInfo.height = img.height;
+      }
+      imgInfo.size = fileObj.size;
+      imgInfo.type = fileObj.type;
+
 
       // FormData 对象
       let form = new FormData();
@@ -72,16 +79,16 @@ export default {
         this.uploading = false;
 
         if (res.status == 200) {
-          this.emitFunc(res.data)
+          this.emitFunc(res.data, imgInfo)
         } else {
-          this.emitFunc("");
+          this.emitFunc("", null);
           this.$message.error(res.message)
         }
       })
     },
     //组件通信
-    emitFunc(val) {
-      this.$emit('input', val)
+    emitFunc(val, info = null) {
+      this.$emit('input', val, info)
     }
   },
 };

src/views/webSiteManagement/imageLibrary/index.vue

@@ -33,7 +33,7 @@ export default {
 
       this.$nextTick(() => {
           if (!!val) {
-            this.$bus.$emit('satelliteIntroduction-edit-renderData', val)
+            this.$bus.$emit('imageLibrary-edit-renderData', val)
           }
       })
 

src/views/webSiteManagement/imageLibrary/list.vue

@@ -25,8 +25,8 @@
         <el-table-column align="center" type="index" label="序号" width="65"></el-table-column>
         <el-table-column align="center" label="产品名称" prop="name"></el-table-column>
         <el-table-column align="center" label="产品类型" prop="type"></el-table-column>
-        <el-table-column align="center" label="尺寸" prop="imageInfoRelationList.ileWidth"></el-table-column>
-        <el-table-column align="center" label="价格" prop="name"></el-table-column>
+        <el-table-column align="center" label="尺寸" prop="imageInfoRelationList[0].fileWidth"></el-table-column>
+        <el-table-column align="center" label="价格" prop="imageInfoRelationList[0].price"></el-table-column>
         <el-table-column align="center" label="状态">
           <template slot-scope="scope">
             {{ getStatus(scope.row.status) }}