提交代码

src/api/dataSet/index.js

@@ -39,11 +39,10 @@ const updateDataSet = (id, data) => {
     });
 }
 //下载图像文件
-const downloadFile = (id) => {
+const downloadFile = (id,fileName) => {
     return request({
-        url: `/dataset/raw/${id}/download`,
-        method: 'get',
-        params: data
+        url: `/dataset/raw/${id}/download?fileName=${fileName}`,
+        method: 'get'
     })
 }
 //删除指定的图像文件

src/views/manage/datas/edit.vue

@@ -103,7 +103,7 @@
         <el-button type="primary" style="position: absolute; right: 30px" @click="handleRemoveAll"
           :disabled="imageList.length == 0"><i-ep-delete />清空全部</el-button>
       </template>
-      <el-upload v-model:file-list="imageList" class="upload-demo upload-demo-2" :before-remove="beforeRemove" />
+      <el-upload v-model:file-list="imageList" class="upload-demo upload-demo-2" :before-remove="beforeRemove" :on-preview="handlePreview"/>
       <el-empty v-if="imageList.length == 0" description="暂 无 数 据" />
     </el-card>
     <el-card class="card-footer">
@@ -135,6 +135,20 @@
         </div>
       </template>
     </el-dialog>
+    <div class="demo-image__preview">
+      <el-image
+        
+        class="imgPreView"
+        :src="imgPreSrc"
+        :zoom-rate="1.2"
+        :max-scale="7"
+        :min-scale="0.2"
+        :preview-src-list="imgPreSrcList"
+        :initial-index="4"
+        style="width: 1px; height: 1px"
+        fit="cover"
+      />
+    </div>
   </div>
 </template>
 
@@ -154,6 +168,10 @@ const codeHtml = ref(""); //  文件信息
 const jsonData = reactive({
   data: {}
 })
+const imgViewer = ref(false);
+const imgPreSrc = ref("");
+const imgPreSrcList = ref([]);
+const imgViewerRef = ref(""); // 图片预览组件
 const imgCount = ref(0); //  图片信息
 const imageList = ref([]); //  图片列表
 const remImageList = ref([]); //  删除图片列表
@@ -450,6 +468,23 @@ function closeBack() {
   router.push({ path: "/dataMgr/datas" });
 }
 
+/** 预览图片 */
+function handlePreview(file) {
+  imgPreSrcList.value = [];
+  DataSetApi.downloadFile(ID.value,file.name).then(res =>{
+    console.log(res)
+    if(res.data.code==0){
+      imgPreSrc.value = "data:image/gif;base64," + res.data.data.file_content;
+      imgPreSrcList.value.push(imgPreSrc.value);
+      setTimeout(() => {
+        console.log("点击事件===>");
+        imgViewer.value = true;
+        document.getElementsByClassName("imgPreView")[0].children[0].click();
+      }, 50);
+    }
+  });
+}
+
 // 初始化选项列表
 const initData = () => {
   let id = route.query.id;