文件上传并预览,无法获取文件信息以及某些属性不懂，如何解决？(语言-javascript)

我想要实现一个系统，其中有一个功能是用户上传文件（任何一种文件内容）并实现预览，目前这一功能不涉及后端

代码如下

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="contentWarp"
      :show-file-list="true"
      :action=""
      :on-success="onSuccess"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      multiple
      :limit="5"
      :on-exceed="handleExceed"
      :file-list="file - list"
      :accept="accepts"
    >
      <el-button icon="el-icon-upload2" @click="uploadFileClick($event)"
        >将文件拖到此处，或<em>点击上传</em></el-button
      >
      <div slot="tip" class="el-upload__tip">
        支持扩展名：.rar .zip .doc .docx .xls .txt .pdf .jpg .png
        .jpeg，最多上传5个文件，每个大小不超过50Mb
      </div>
    </el-upload>
    <div class="flex mt20" v-if="file - list.length > 0">
      <div
        class="items-wrap"
        ref="contentWrap"
        :style="wrapHeight <= 70 ? 'height: auto' : `height: 60px;`"
        :class="{ noHidden: noHidden }"
      >
        <uploadfile-item
          v-for="(item, index) in file - list"
          :key="index"
          :file="item"
          @cancel="cancelFile"
          :showDel="true"
          class="mr20"
        ></uploadfile-item>
      </div>
      <div class="on-off" v-if="wrapHeight > 70" @click="noHidden = !noHidden">
        {{ noHidden ? "收起" : "更多" }}
      </div>
    </div>
  </div>
</template>
<script>
import UploadfileItem from "./UploadfileItem.vue";
export default {
  components: {
    UploadfileItem,
  },
  data() {
    return {
      noHidden: true,
      wrapHeight: 0,
      delDialogitem: 0,
      imgLoad: false,
      centerDialogVisible: false,
      filelist:[],
      }
    },
  methods:{
    cancelFile(file) {
      console.log(file);
    },

    // 上传文件只能添加五条
    uploadFileClick(event) {
      if (this.formLabelAlign.annex.length === 5) {
        this.$message({
          type: "warning",
          message: "最多只可以添加五条",
        });
        event.stopPropagation();
        return false;
      }
    },
    //
    onSuccess(response, ) {
      if (!response) {
        this.$message.error("文件上传失败");
      } else {
        this.imgLoad = false;
        this.$message({
          message: "上传成功!",
          type: "success",
        });
      }
    },
   
    beforeUpload(file){
      console.log(file);
    },
    handleExceed(file) {
console.log(file);
    },
}
}
</script>

UploadfileItem 文件内容

<template>
  <div class="file-style-box">
    <div class="upload-file-item">
      <img :src="imgsrc[getEnd(file.fileName)]" alt="" />
      <div>
        <p class="file-name">
          <span class="name">{{ file.fileName }}</span>
        </p>
        <div class="option">
          <span class="size">{{ file.size | toKB }}kb</span>
          <div>
            <span
              v-if="showDel && (isPdf(file) || isImg(file))"
              @click="previewHandler(file.url)"
              class="preview mr10"
              >预览</span
            >
            <a
              v-if="!showDel"
              @click="downLoadHandler"
              class="preview"
              :href="file.url"
              >下载</a
            >
            <span v-if="showDel" class="mr10 success">上传完成</span>
          </div>
        </div>
        <div class="delBtn" v-if="showDel" @click="cancelHanlder(file)">
          <img src="@/assets/public/tips-err.png" alt="123" />
        </div>
      </div>
    </div>
    <el-dialog
      title="图片预览"
      width="800px"
      class="imgDlgBox"
      :visible.sync="imgDlgVisible"
      :close-on-click-modal="true"
      :modal="false"
      append-to-body
    >
      <img :src="imgUrl" alt="123" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    file: {
      type: Object,
      default: ()=>{}
      },
    showDel: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      imgDlgVisible: false,
      imgUrl: "../assets/images/logo.png",
      pdfUrl: "../assets/images/logo.png",
      imgsrc: {
        /*
        *imgsrc 是关于内部静态图片的显示的路径，需要自己设置
        *示例"xls": require('@/assets/image/xls.png'),
        xis的文件所需要加载的路径是；assets文件下的image文件夹下的xls.png
    */
        rar: require("@/assets/images/logo.png"),
        zip: require("@/assets/images/logo.png"),
        pdf: require("@/assets/images/logo.png"),
        jpg: require("@/assets/images/logo.png"),
        jpeg: require("@/assets/images/logo.png"),
        png: require("@/assets/images/logo.png"),
        doc: require("@/assets/images/logo.png"),
        docx: require("@/assets/images/logo.png"),
        txt: require("@/assets/images/logo.png"),
        xls: require("@/assets/images/logo.png"),
      },
    };
  },
  filters: {
    toKB(val) {
      return (Number(val) / 1024).toFixed(0);
    },
  },
  methods: {
    cancelHanlder(item) {
      this.$emit("cancel", item);
    },
    previewHandler(data) {
      if (data) {
        const addTypeArray = data.split(".");
        const addType = addTypeArray[addTypeArray.length - 1];
        if (addType === "pdf") {
          let routeData = this.$router.resolve({
            path: "/insurancePdf",
            query: { url: data, showBack: false },
          });
          window.open(routeData.href, "_blank");
        } else if (addType === "doc") {
          window.open(
            `https://view.officeapps.live.com/op/view.aspx?src=${data}`
          );
        } else if (addType === "txt") {
          window.open(`${data}`);
        } else if (["png", "jpg", "jpeg"].includes(addType)) {
          // 图片类型
          this.imgDlgVisible = true;
          this.imgUrl = data;
        }
      }
    },
  },
};
</script>
<style lang='scss'>
.file-style-box {
  padding: 10px 10px 0 0;
}
.imgDlgBox {
  .el-dialog {
    .el-dialog__body {
      text-align: center;
      img {
        width: 700px;
        height: auto;
      }
    }
  }
}
.upload-file-item {
  background: #fafafa;
  border-radius: 4px;
  padding: 5px 10px;
  margin-bottom: 10px;
  display: flex;
  font-size: 14px;
  width: 236px;
  box-sizing: border-box;
  position: relative;
  img {
    width: 32px;
    height: 40px;
    margin-top: 5px;
    margin-right: 10px;
  }
  .option {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .file-name {
    width: 163px;
    display: flex;
    flex-wrap: nowrap;
    font-size: 14px;
    color: #333;
    font-weight: 400;
    .name {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .end {
      flex: 0 0 auto;
    }
    .el-button {
      border: none;
      padding: 0px;
      width: 90%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .size {
    color: #969696;
  }
  .success {
    color: #78c06e;
  }
  .delBtn {
    position: absolute;
    top: -14px;
    right: -18px;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
    }
  }
  // .del {
  //   color: #E1251B;
  //   cursor: pointer;
  // }
  .preview {
    color: #0286df;
    cursor: pointer;
  }
  .mr10 {
    margin-right: 10px;
  }
}
</style>

这个是我从网上找的模板，其中我有几个问题，upload上传action属性我没搞懂接口是怎么写？然后上传成功的文件怎么获取的？代码中如果有其他问题也可以指出，谢谢啦

action是自动上传，一般很少用，可以为空，auto-upload设置为false

你如果只想纯js实现的话，就不用写接口来实现

action属性就是用于指定上传文件的接口地址，action属性被设置为空字符串，这意味着上传功能没有与后端服务器连接，因此上传文件并不会真正地发送到后端服务器，也就无法获取上传成功的文件

你可以模拟上传成功的情况，在onSuccess方法中手动处理上传成功后的逻辑，例如将成功上传的文件信息添加到一个数组中，然后在前端展示出来

比如

onSuccess(response) {
  if (!response) {
    this.$message.error("文件上传失败");
  } else {
    // 假设后端返回的数据格式如下，可以根据实际情况进行修改
    // { url: 'http://example.com/uploads/file1.jpg', fileName: 'file1.jpg', size: 1024 }
    // 假设 response 是后端返回的上传成功的文件信息
    this.filelist.push(response); // 将上传成功的文件信息添加到 filelist 数组中
    this.imgLoad = false;
    this.$message({
      message: "上传成功!",
      type: "success",
    });
  }
},

模拟上传成功后，就可以通过filelist数组来获取上传成功的文件信息