判断文件后缀名，根据不同的后缀名渲染不同的文件

理想必须要人们去实现它，它不但需要决心和勇敢而且需要知识。——吴玉章

今天写项目的时候，遇到一个有意思需求，也是第一次搞奋斗了三个小时完工，也算是记录一下第一次把，哈哈…

项目需求是跟据后台传过来的数据，进行不同的页面渲染，听着是不是不难啊，但是后台传过来的数据有文件，有图片，有压缩包，而且还是个数组，一条记录里多个文件，这样一听是不是就觉的难了点，嘿嘿，给你们看一下需求：

点击按钮，弹出Dialog，还在开发中所以不要纠结数据哈，数据都是随便写的

图片要渲染轮播图方式，而且需要预览：

文件渲染也要轮播图显示，显示不同的文件名，还需要下载：

我是用的element ui 中的走马灯效果为基础做的，js代码对传回来的文件后缀名进行了区分，然后根据不同的文件后缀名来显示不同的Dialog内容，直接上代码：

表单绑定点击事件，弹出Dialog

Dialog代码：

<el-dialog class="customTemplate"
                   :title="lookover"
                   :modal-append-to-body="false"
                   :append-to-body="true"
                   :close-on-click-modal="false"
                   :visible.sync="dialogVisibles"
                   :show-close="false"
                   width="466px">
            <div class="block">
                <div v-if="isShow">
                    <el-carousel :autoplay="false"
                                 indicator-position="outside">
                        <el-carousel-item v-for="(item,index) in resourceList"
                                          :key="index">
                            <div>
                                <el-image :src="item"
                                          :preview-src-list="[item]">
                                </el-image>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div v-if="isShow2">
                    <el-carousel :autoplay="false"
                                 indicator-position="outside">
                        <el-carousel-item v-for="(item,index) in resourceList"
                                          class="rarImg"
                                          :key="index">
                            <img src="../../images/rar.png"
                                 alt="">
                            <span>{{item}}</span>
                            <a :href="item">
                                <el-button type="text"
                                           icon="el-icon-download"> 点击下载</el-button>
                            </a>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div v-if="isShow3">
                    <el-carousel :autoplay="false"
                                 indicator-position="outside">
                        <el-carousel-item v-for="(item,index) in resourceList"
                                          class="rarImg"
                                          :key="index">
                            <img src="../../images/word.png"
                                 alt="">
                            <span>{{item}}</span>
                            <a :href="item">
                                <el-button type="text"
                                           icon="el-icon-download"> 点击下载</el-button>
                            </a>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div v-if="isShow4">
                    <el-carousel :autoplay="false"
                                 indicator-position="outside">
                        <el-carousel-item v-for="(item,index) in resourceList"
                                          class="rarImg"
                                          :key="index">
                            <img src="../../images/pdf.png"
                                 alt="">
                            <span>{{item}}</span>
                            <a :href="item">
                                <el-button type="text"
                                           icon="el-icon-download"> 点击下载</el-button>
                            </a>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <span style="text-align: center"
                  slot="footer"
                  class="dialog-footer">
                <el-button type="primary"
                           @click="closed">确 定</el-button>
            </span>
        </el-dialog>

JS代码：

   LookOver (row) {
            this.dialogVisibles = true
            this.lookover = row.chatbotName
            let strArr = []
            let strArrs = []
            if (row.resourceList && Array.isArray(row.resourceList) && row.resourceList.length) {
                row.resourceList.forEach((item) => {
                    strArr.push(item.resourceUrl)
                    strArrs.push(item.resourceName)
                })
            }
            console.log('aa', strArr);
            this.resourceList = strArr
            this.resourceLists = strArrs
            // 判断文件后缀名
            var suffix = '';
            for (let k of strArrs.values()) {
                try {
                    var flieArr = k.split('.');
                    suffix = flieArr[flieArr.length - 1];
                } catch (err) {
                    suffix = '';
                }
            }
            this.suffix = suffix
            if (suffix === 'jpg' && 'jpeg' && 'gif') {
                this.isShow = true
            } else if (suffix === 'rar') {
                this.isShow2 = true
            } else if (suffix === 'docx' && 'doc') {
                this.isShow3 = true
            } else if (suffix === 'pdf') {
                this.isShow4 = true
            }
        },
        closed () {
            this.dialogVisibles = false
            this.isShow = false
            this.isShow2 = false
            this.isShow3 = false
            this.isShow4 = false
        },

return数据：

			lookover: '',
            resourceList: '',
            suffix: '',
            isShow: false,
            isShow2: false,
            isShow3: false,
            isShow4: false

有对代码不了解的可以私信或者评论（秒回的那种），希望对你有所帮助！