element 图片上方添加文字 elementui上传图片预览

一、el-upload上传后换封面

原始效果如下：

（上传图片时正常显示图片封面，但是上传其他格式文件时，没有封面，只有一个小的缩略默认图片）

预期效果如下：

（上传图片—>显示图片、上传pdf文件—>pdf封面图片、其他格式文件采用相同方法）

原因讲解：由于el-upload展示封面时根据file-list参数中的url字段来进行展示的，所以我们在处理数据的时候我们将其中的url替换成自己想要的封面图片，然后将实际的文件路径存放到另一个自定义字段里面就好，这里我的自定义字段为“realurl“

代码展示：
1、页面代码：

<el-upload
                action="123"
                :http-request="uploadmany"
                 list-type="picture-card"
                :file-list="fileList"
                >
             </el-upload>

2、组件相关函数实现代码

uploadmany(file) {
      var formData = new FormData();//这是由于接口数据类型规定，可以根据自己所需进行更改
      formData.append("file", file.file);
      this.$axios
        .post("/carInfo/uploadPhoto", formData, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((res) => {
          if (res.data.code == 200) {
            console.log(res);
            var last = res.data.result.substring(res.data.result.lastIndexOf("."));//将接口中返回的各文件链接进行截取，来判断属于什么格式文件
            if (last == ".pdf") {
              this.fileList.push({
                url: "https://img0.baidu.com/it/u=3644622474,3688361323&fm=26&fmt=auto&gp=0.jpg",//pdf封面图片
                realurl: res.data.result,//接口返回的pdf文件链接
              });
            } else if (last == ".png" || last == ".jpg" || last == ".jpeg" || last == '.jfif') {
              this.fileList.push({
                url: res.data.result,
                realurl: res.data.result,
              });
            } else if (last == ".doc" || last == ".docx") {
              this.fileList.push({
                url: 'https://img1.baidu.com/it/u=1714136260,3766911961&fm=26&fmt=auto&gp=0.jpg',
                realurl: res.data.result,
              });
            } else if (last == '.xls' || last == '.xlsx') {
              this.fileList.push({
                url: 'https://img1.baidu.com/it/u=1123362811,2189997153&fm=26&fmt=auto&gp=0.jpg',
                realurl: res.data.result,
              });
            }
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
              offset: 70,
            });
          }
        });
    },

二、上传后点击预览大图（与el-image组件结合开发）

效果图如下：

点击图片中的+号之后展示如下

可点击图片中的红框内进行相关展示

代码如下：

<el-upload
                  action="123"
                  :on-preview="handlePictureCardPreview"//预览功能
                  :disabled="readonly"//只读
                  :file-list="fileList"
                  :class="{ disabled: true, 'avatar-uploader': true }"//只读下，关闭固有的上传框
                > 
                </el-upload>

由于el-image需要进一步点击才能打开大图，我们需要跳过点击这一步，直接展示大图，所以采用el-image的底层组件’el-image-viewer’，
代码如下：
1、引入组件（el-image-viewer是elementui中原有组件，不需要自定义，直接引入就行）

components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },

2、在vue的template中使用组件

<el-image-viewer
        v-if="dialogVisible"
        :url-list="[dialogImageUrl]"
        :on-close="closeViewer"//关闭大图时触发
      />

3、使用el-uploader的原有预览功能获取文件链接
代码如下：

handlePictureCardPreview(file) {
      var last = file.realurl.substring(file.realurl.lastIndexOf("."));
      if (
        last == ".png" ||
        last == ".jpg" ||
        last == ".jpeg" ||
        last == ".jfif"
      ) {
        this.dialogImageUrl = file.realurl;
        this.dialogVisible = true;
      } else if (last == ".pdf") {
        window.open(file.realurl);
      } else {
        window.open(
          "https://view.officeapps.live.com/op/view.aspx?src=" + file.realurl//微软提供的开源接口，打开word，excel等文件
        );
      }
    },
  // 关闭查看器
    closeViewer() {
      this.dialogVisible = false
    },

解决方案就是这样了，有什么不足，还请各位海涵并指正，感谢！！！