el-upload上传文件列表，根据不同后缀名显示不同图标

最新推荐文章于 2024-05-01 02:01:08 发布

波澜之间

最新推荐文章于 2024-05-01 02:01:08 发布

阅读量2.1k

点赞数 4

文章标签： servlet java html

本文链接：https://blog.csdn.net/weixin_60924822/article/details/131168206

版权

html代码：

<div class="upload_box">
              <el-upload
                class="upload-demo"
                ref="upload"
                action="saveFile"
                :http-request="saveFile"
                list-type="picture-card"
                :on-change="fileListChange"
                :on-remove="handleRemove"
              >
              <!-- list-type="picture-card" -->
                <!-- // 上传icon	 -->
                <i class="el-icon-plus"></i>
                <!-- //插槽自定义鼠标经过显示的按钮 -->
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <!-- //预览操作 -->
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePvew(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <!-- //删除操作 -->
                    <span
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>

methods部分：这里可以用文件改变的勾子函数可以改成文件上传成功的勾子函数。

//预览文件预览
    handlePvew(file) {
      //拿到当前点击的文件，根据自己需求实现
      console.log('文件预览')
    },
    //删除当前文件
    handleRemove(file) {
      console.log('文件删除')
      let index = this.$refs.upload.uploadFiles.indexOf(file);
      this.$refs.upload.uploadFiles.splice(index, 1);
    },
    // 文件发生改变时
    fileListChange(file,fileList){
      this.$nextTick(() => {
        $(".el-upload-list__item").map(index => {
          //这里是根据文件名称来获取后缀名
          let fix = fileList[index].name.split(".").pop();
          if (
            ["png", "jpg", "jpeg", ".gif", "PNG", "JPG", "JPEG", "GIF"].indexOf(
              fix
            ) != -1
          ) {
            console.log(11);
            console.log(
              $(`.el-upload-list__item-thumbnail:eq(${index})`).attr("src")
            );
            // 如果是图片文件则不做处理
            return;
          } else {
            $(`.el-upload-list__item-thumbnail:eq(${index})`).attr(
              "src",
              require('@/assets/images/teacher/pdf-icon.png')
            );
            // 这里也可以用本地图片 require('@/assets/fire/WORD.png')
          }
        });
      });
    },

css部分

.upload_box {
            margin-top: 0.1389rem;

            /deep/ .el-upload-list--picture-card .el-upload-list__item-actions {
              width: 0.6944rem;
              height: 0.6944rem;
              // position: fixed;
              z-index: 999999;
            }
            /deep/ .el-upload {
              position: relative;
              border-radius: 0.0208rem;
              width: 0.6944rem;
              height: 0.6944rem;
              background-size: 100% 100%;
            }

            /deep/ .el-upload-list__item {
              border-radius: 0.0208rem;
              width: 0.6944rem;
              height: 0.6944rem;
              background-size: 100% 100%;
              /deep/ .el-upload-list__item-thumbnail {
                border-radius: 0.0208rem;
                width: 0.6944rem;
                height: 0.6944rem;
                background-size: 100% 100%;
              }
            }
            /deep/ .el-upload--picture-card {
              // margin: 0 auto;
              // display: block;
              // border: 1px solid red;
              // display: flex;
              // align-content: center;
              // align-items: center;
              text-align: center;
              position: relative;
              .el-icon-plus {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }