图片附件预览

shuishen

2021-08-13 b6dd47e1fa3b748c62210e9a70413feb3bcecf4e

图片附件预览

 src/styles/common.scss

@@ -44,16 +44,16 @@
      height: calc(100% - 62px);
    }

    img {
    div.img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      max-width: calc(100% - 8px);
      max-height: calc(100% - 8px);
      overflow: hidden;
    }
  }


 src/views/resource/attach.vue

@@ -41,10 +41,10 @@
                           @click="handleDownload(scope.row)">下载222
                </el-button>
                <el-button type="text"
                           icon="el-icon-download"
                           icon="el-icon-picture-outline-round"
                           size="small"
                           v-show="!fileFormat(scope.row)"
                           @click="seeImages(scope.row)">图片预览
                           @click="seeImages(scope.row)">预览
                </el-button>
            </template>
            <template slot-scope="{ row }"
@@ -63,12 +63,16 @@
            </avue-form>
        </el-dialog>

        <el-dialog title="图片预览"
        <el-dialog title="预览"
                   append-to-body
                   :visible.sync="imgSee"
                   class="see-img-box">
            <img :src="imgUrl"
                 alt="">

            <div class="img"
                 :style="{background: imgUrl}">

            </div>

        </el-dialog>

    </basic-container>
@@ -347,7 +351,7 @@

        seeImages (row) {
            this.imgUrl = "";
            this.imgUrl = row.link;
            this.imgUrl = "url(" + row.link + ") center center / contain no-repeat";

            this.imgSee = true;
        },

 src/views/resource/attachCopy.vue

@@ -1,7 +1,6 @@
<template>
  <basic-container class="hasButTwo">
    <avue-crud
      :option="option"
        <avue-crud :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
@@ -16,55 +15,64 @@
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
                   @on-load="onLoad">
      <template slot="menuLeft">
        <el-button
          type="primary"
                <el-button type="primary"
          size="small"
          plain
          v-if="permission.attach_upload"
          icon="el-icon-upload2"
          @click="handleUpload"
          >上 传
                           @click="handleUpload">上 传
        </el-button>
        <el-button
          type="danger"
                <el-button type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.attach_delete"
          @click="handleDelete"
          >删 除
                           @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button
          type="text"
            <template slot-scope="scope"
                      slot="menu">
                <el-button type="text"
          icon="el-icon-download"
          size="small"
          v-if="permission.attach_download"
          @click="handleDownload(scope.row)"
          >下载
                           @click="handleDownload(scope.row)">下载
                </el-button>
                <el-button type="text"
                           icon="el-icon-picture-outline-round"
                           size="small"
                           v-show="!fileFormat(scope.row)"
                           @click="seeImages(scope.row)">预览
        </el-button>
      </template>
      <template slot-scope="{ row }" slot="attachSize">
            <template slot-scope="{ row }"
                      slot="attachSize">
        <el-tag>{{ `${row.attachSize} KB` }}</el-tag>
      </template>
    </avue-crud>
    <el-dialog
      title="附件管理"
        <el-dialog title="附件管理"
      append-to-body
      :visible.sync="attachBox"
      width="555px"
    >
      <avue-form
        ref="form"
                   width="555px">
            <avue-form ref="form"
        :option="attachOption"
        v-model="attachForm"
        :upload-after="uploadAfter"
      >
                       :upload-after="uploadAfter">
      </avue-form>
        </el-dialog>

        <el-dialog title="预览"
                   append-to-body
                   :visible.sync="imgSee"
                   class="see-img-box">

            <div class="img"
                 :style="{background: imgUrl}">

            </div>

    </el-dialog>
  </basic-container>
</template>
@@ -209,6 +217,8 @@
          },
        ],
      },
            imgSee: false,
            imgUrl: ""
    };
  },
  computed: {
@@ -353,6 +363,22 @@
        this.selectionClear();
      });
    },

        seeImages (row) {
            this.imgUrl = "";
            this.imgUrl = "url(" + row.link + ") center center / contain no-repeat";

            this.imgSee = true;
        },

        fileFormat (row) {
            var index = row.link.lastIndexOf(".");
            var ext = row.link.substr(index + 1);

            return [
                'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].
                indexOf(ext.toLowerCase()) == -1;
        }
  },
};
</script>

 src/views/resource/uploadNotice.vue

@@ -1,7 +1,6 @@
<template>
  <basic-container class="hasButTwo">
    <avue-crud
      :option="option"
        <avue-crud :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
@@ -16,55 +15,64 @@
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
                   @on-load="onLoad">
      <template slot="menuLeft">
        <el-button
          type="primary"
                <el-button type="primary"
          size="small"
          plain
          v-if="permission.attach_upload"
          icon="el-icon-upload2"
          @click="handleUpload"
          >上 传
                           @click="handleUpload">上 传
        </el-button>
        <el-button
          type="danger"
                <el-button type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.attach_delete"
          @click="handleDelete"
          >删 除
                           @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button
          type="text"
            <template slot-scope="scope"
                      slot="menu">
                <el-button type="text"
          icon="el-icon-download"
          size="small"
          v-if="permission.attach_download"
          @click="handleDownload(scope.row)"
          >下载
                           @click="handleDownload(scope.row)">下载
                </el-button>
                <el-button type="text"
                           icon="el-icon-picture-outline-round"
                           size="small"
                           v-show="!fileFormat(scope.row)"
                           @click="seeImages(scope.row)">预览
        </el-button>
      </template>
      <template slot-scope="{ row }" slot="attachSize">
            <template slot-scope="{ row }"
                      slot="attachSize">
        <el-tag>{{ `${row.attachSize} KB` }}</el-tag>
      </template>
    </avue-crud>
    <el-dialog
      title="附件管理"
        <el-dialog title="附件管理"
      append-to-body
      :visible.sync="attachBox"
      width="555px"
    >
      <avue-form
        ref="form"
                   width="555px">
            <avue-form ref="form"
        :option="attachOption"
        v-model="attachForm"
        :upload-after="uploadAfter"
      >
                       :upload-after="uploadAfter">
      </avue-form>
        </el-dialog>

        <el-dialog title="预览"
                   append-to-body
                   :visible.sync="imgSee"
                   class="see-img-box">

            <div class="img"
                 :style="{background: imgUrl}">

            </div>

    </el-dialog>
  </basic-container>
</template>
@@ -152,12 +160,6 @@
            ],
          },
          {
            label: "预览图",
            prop: "link",
            dataType: "string",
            type: "img",
          },
          {
            label: "附件拓展名",
            prop: "extension",
            rules: [
@@ -209,6 +211,9 @@
          },
        ],
      },

            imgSee: false,
            imgUrl: ""
    };
  },
  computed: {
@@ -350,6 +355,22 @@
        this.selectionClear();
      });
    },

        seeImages (row) {
            this.imgUrl = "";
            this.imgUrl = "url(" + row.link + ") center center / contain no-repeat";

            this.imgSee = true;
        },

        fileFormat (row) {
            var index = row.link.lastIndexOf(".");
            var ext = row.link.substr(index + 1);

            return [
                'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].
                indexOf(ext.toLowerCase()) == -1;
        }
  },
};
</script>