Vue2+element文件上传预览的功能实现

最新推荐文章于 2025-06-18 10:46:40 发布

毛三仙

最新推荐文章于 2025-06-18 10:46:40 发布

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：组件封装后台管理系统文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_74149462/article/details/129025238

后台管理系统同时被 2 个专栏收录

71 篇文章

订阅专栏

组件封装

19 篇文章

订阅专栏

该段代码展示了如何在Vue.js中使用ElementUI的el-dialog和el-upload组件实现文件上传功能，包括文件限制、上传前处理、成功回调、预览、移除等操作。同时，还包含了附件预览的弹窗，通过iframe展示已上传文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <el-dialog
    title="uploadFile"
    :visible.sync="dialogVisible"
    width="60%"
    :append-to-body="true"
    :modal-append-to-body="false"
    :before-close="closeDialog"
  >
    <div class="upload-file-box">
      <el-upload
        :action="fileUrl"
        :headers="headers"
        :before-upload="beforeUpload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :before-remove="beforeRemove"
        multiple
        :limit="5"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" type="primary" icon="el-icon-plus"
          >上传文件</el-button
        >
        <!-- <div slot="tip" class="el-upload__tip">可上传图片、Excel、Word、pdf格式文件</div> -->
      </el-upload>
    </div>

    <!-- 附件预览的弹窗 -->
    <div>
      <el-dialog
        title="附件预览"
        :visible.sync="dialogVisible1"
        width="70%"
        :before-close="closeDialog1"
        :modal-append-to-body="false"
        :append-to-body="true"
      >
        <iframe style="width: 100%;height: 600px" :src="pathFile"></iframe>
        <div slot="footer" class="dialog-footer">
          <el-button
            class="filter_button"
            type="primary"
            @click="dialogVisible1 = false"
            >关 闭</el-button
          >
        </div>
      </el-dialog>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">关 闭</el-button>
    </span>
  </el-dialog>
</template>


<style lang="scss" scoped>
.upload-file-box {
  height: 380px;
  overflow: auto;
}
</style>

data() {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      fileUrl: "文件上传的接口",
      headers: { '自定义名称': "请求头" }, // 例如: headers: { Authorization: "adsda" },
      pathFile: "",
      fileUrlLoad: "文件回显的接口",
      fileList: [],
      formData: {
        enclosureFiles: []
      }
    };
  },

  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    closeDialog1() {
      this.dialogVisible1 = false;
    },

    /* 文件上传 */
    beforeUpload(file) {},
    handlePreview(file) {
      console.log(file);
      this.dialogVisible1 = true;
      if (file.url) {
        this.pathFile = this.fileUrlLoad + file.url;
      }
      if (file.path) {
        this.pathFile = this.fileUrlLoad + file.path;
      } else {
        this.pathFile = this.fileUrlLoad + file.response.data.path;
      }
    }, // 关键是这一步，把回显的地址给pathFile不同的后端返回的也不同，需自行修改
    handleRemove(file, fileList) {
      const that = this;
      this.formData.enclosureFiles.forEach((item, index) => {
        if (file.response) {
          if (item.id === file.response.data.id) {
            this.formData.enclosureFiles.splice(index, 1);
          }
        } else {
          if (item.id === file.id) {
            this.formData.enclosureFiles.splice(index, 1);
          }
        }
      });
    },
    handleSuccess(response, file, fileList) {
      // console.log(response);
      this.formData.enclosureFiles.push({
        uid: file.uid,
        id: response.data.id
      });
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    }
  }