图片预览

shuishen

2021-08-13 06833fa81269e7f29b8f1c663d38eb1117ab9509

 src/views/resource/attach.vue

@@ -43,6 +43,7 @@
                <el-button type="text"
                           icon="el-icon-download"
                           size="small"
                           v-show="!fileFormat(scope.row)"
                           @click="seeImages(scope.row)">图片预览
                </el-button>
            </template>
@@ -61,6 +62,15 @@
                       :upload-after="uploadAfter">
            </avue-form>
        </el-dialog>

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

    </basic-container>
</template>

@@ -193,6 +203,8 @@
                    },
                ],
            },
            imgSee: false,
            imgUrl: ""
        };
    },
    computed: {
@@ -334,20 +346,19 @@
        },

        seeImages (row) {
            this.imgUrl = "";
            this.imgUrl = row.link;

            this.imgSee = true;
        },

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

            console.log("该文件是否为图片：" + isAssetTypeAnImage(ext));

            function isAssetTypeAnImage (ext) {
                return [

                    'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].

                    indexOf(ext.toLowerCase()) == -1;

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