vue项目elementUi照片墙图片预览

背景：后端返回的数据是个图片的url的数组，但是这个url是无法直接作为图片预览的,需要每次去调接口获取真正的url

一、template页面

<template>
  <div>
      <el-form>
        <el-form-item label="详情图片" class="pic">
              <el-upload
                id="selectfiles"
                :file-list="filesList"
                list-type="picture-card"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :http-request="(file)=>myUploadPic( file,'fileUrl')"
                :before-upload="beforeUpload"
                multiple
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt>
              </el-dialog>
           </el-form-item>
      </el-form>
  </div>
</template>

二、js代码

    getFiles() {
      if (this.directProductForm.id) {
        this.$http({
          url: '/rental/rentalProjectTemplateFile/data',
          method: 'post',
          params: { 'rentalProjectTemplateId': this.directProductForm.id }
        })
          .then(res => {
            if (res.code === 200) {
              const that = this;
              that.fileListLength = res.rows.length;
              // 初始化fileLIst,这里使用map是为了避免出现填充的对象存在引用问题，
              // 就是这三个对象其实是同一个对象，其中fileList就是照片墙绑定的数据
              that.filesList = new Array(that.fileListLength).fill(null).map((item, index) =>
                (item = { url: '', id: res.rows[index].id })
              );
              if (res.rows.length > 0) {
                res.rows.map((item, index) => {
                  that.directProductForm.fileUrlList.push(item);
                  // 这个方法就是真正的查看图片的方法
                  that.getImgUrl(item.fileUrl, index);
                  return item;
                });
              }
            } else {
              this.$message(res.message);
            }
          })
          .catch(error => {
            this.$message(error);
          });
      }
    },
    getImgUrl(fileUrl, index) {
      this.$http({
        url: '/file/preview/getFileUrl',
        method: 'get',
        params: { 'url': fileUrl }
      })
        .then(res => {
          const that = this;
          if (res.code === 200) {
            that.filesList[index].url = res.object;
          } else {
            this.$message(res.message);
          }
        })
        .catch(error => {
          this.$message(error);
        });
      return this.url;
    }