vue表格显示多图片多文件

盖世小可爱

已于 2022-07-25 15:45:02 修改

阅读量1.7k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-07-25 15:43:05 首次发布

本文链接：https://blog.csdn.net/qqqnzhky/article/details/125976182

版权

vue 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

一、数据格式用数组存起来：测试数据上传了一张图片和一个文档
在这里插入图片描述

二、UI显示

 <el-table-column prop="files" label="月度文件下载">
          <div slot-scope="{ row }">
            <div v-if="row.files">
              <div v-for="(item, index) in row.files" :key="index">
                <div v-if="isImgFile(item)">
                  <el-popover placement="left" trigger="click" width="400">
                    <img
                      :src="baseUrl + '/file/download?filePath=' + item"
                      width="100%"
                    />
                    <img
                      slot="reference"
                      :src="baseUrl + '/file/download?filePath=' + item"
                      alt="暂无文件"
                      style="
                        max-height: 70px;
                        max-width: 70px;
                        padding: 5px;
                        cursor: pointer;
                      "
                    />
                  </el-popover>
                </div>
                <div v-else>
                  <el-link class="linkCss" @click="downLoadfile(item)">{{
                    item
                  }}</el-link>
                </div>
              </div>
            </div>
            <div v-else>
              <span>暂未上传</span>
            </div>
          </div>
        </el-table-column>

三、后台拿到的数据是json字符串转成json对象用点.属性点出来
在这里插入图片描述
拿到数组对象的jsonData属性转成json对象获取file数据逗号截取存成数组

 // 获取数据
    getData(data) {
      getMonthProductdata(data).then(val => {
        if (val.code === 200) {
          this.tableData = val.data.list
          if (this.tableData.length == 0) {
            this.$message.warning('暂无数据')
          } else {
            var imageUrls = [] 
            val.data.list.map(item => {
              if (item.jsonData) {
                var fileArr = JSON.parse(item.jsonData)
                if (fileArr.file) {
                  imageUrls = fileArr.file.split(',')
                  item.files = imageUrls //新增file属性 存数组进去，在界面循环展示
                } 
              }
            }) 
          }
          console.log(this.tableData, 'tableData')
        }
      }).catch((res) => {
        this.$message.error(res);
      });
    },

四、判断是图片还是文件：在界面循环展示的时候引用这个方法图片返回true

   isImgFile(fileName) {
      // console.log(fileName, 'fileName')
      //后缀获取
      let suffix = '';
      // 获取类型结果
      let result = '';
      const flieArr = fileName.split('.');
      suffix = flieArr[flieArr.length - 1];
      if (suffix != "") {
        suffix = suffix.toLocaleLowerCase();
        // 图片格式
        const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
        // 进行图片匹配
        result = imglist.find(item => item === suffix);
        if (result) {
          return true;
        }
      }
      return false;
    },

五、图片的展示用image展示，文档的话用链接点击就下载

   downLoadfile(fileName) {
      let url = process.env.VUE_APP_BASE_API + '/file/download?filePath=' + fileName
      window.location.href = url
    },

示例：表格展示样式可以自行调调
在这里插入图片描述