图片预览

src/views/picManage/uploadtype.vue

@@ -77,6 +77,21 @@
         >
       </div>
     </el-dialog>
+
+  <!-- 图片预览列表弹窗 -->
+  <el-dialog :visible.sync="dialogVisible4preview" title="文件地址列表" width="50%" :modal="true">
+      <div style="max-height: 400px; overflow-y: auto;">
+        <!-- 图片预览列表 -->
+        <div v-for="(item, index) in this.dialog1Data.filePath" :key="index">
+          <p @click="previewFile(item)" style="cursor: pointer; text-decoration: underline; color:#1890ff;">{{ item }}</p> <!-- 超链接地址 -->
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible4preview = false">关闭</el-button>
+      </span>
+    </el-dialog>
+
+
     <el-row>
       <!--角色管理-->
       <el-col :span="24">
@@ -112,7 +127,7 @@
                 <el-button
                   type="primary"
                   size="mini"
-                  @click="previewFile(scope.row)"
+                  @click="showPrivewModal(scope.row)"
                   >预览</el-button
                 >
               </template>
@@ -149,6 +164,7 @@ export default {
   },
   data() {
     return {
+      dialogVisible4preview: false,
       previewUrl: process.env.VUE_APP_LOCAL_API,
       dialog1Data:{},
       httpHeaders: {
@@ -265,9 +281,18 @@ export default {
         window.open(this.previewUrl + '/file' + file.response.result)
       }
     },
-    previewFile(item) {
-      if (item.filePath) {
-        window.open(this.previewUrl + '/file' + item.filePath)
+    showPrivewModal(item){
+      this.dialog1Data.filePath = item.filePath
+      this.dialogVisible4preview = true
+    },
+    // previewFile(item) {
+    //   if (item.filePath) {
+    //     window.open(this.previewUrl + '/file' + item.filePath)
+    //   }
+    // },
+    previewFile(url) {
+      if (url) {
+        window.open(this.previewUrl + '/file' + url, 'preview')
       }
     },
     getCompanyList(){