elementUI之upload上传、预览、删除（带确认提示）

最新推荐文章于 2024-05-29 17:14:08 发布

前端小白的逆袭

最新推荐文章于 2024-05-29 17:14:08 发布

阅读量1.2w

点赞数 2

分类专栏： Web前端文章标签：前端

本文链接：https://blog.csdn.net/Kindergarten_Sir/article/details/109032619

版权

Web前端专栏收录该内容

140 篇文章 8 订阅

订阅专栏

elementUI之upload上传、预览、删除（带确认提示）

效果入下：

在这里插入图片描述

1.el-upload的HTML部分

1） action="#"属性用于控制【上传地址，是必选项】，但是这里我们不使用，所以复制“#”。这是因为一般在项目开发中，我们的接口请求一般习惯于统一管理，我们会在后续的代码中使用axios上传。
2）accept=".pdf"属性标识上传的文件类型，多个类型可用【英文逗号】分隔。
3）multiple属性控制【可以同时传递多个文件】。
4）limit="3"属性控制【最多上传的文件数量】
5）:file-list="fileList"属性是【上传后的文件列表展示】
6）:auto-upload="false"属性【阻止自动上传】，建议阻止自动上传

 <el-upload
        class="upload-demo"
        action="#"
        accept=".pdf"
        :on-preview="handlePreview"
        :before-remove="beforeRemove"
        :on-exceed="handleExceed"
        :on-change="uploadCertificateChange"
        multiple
        :limit="3"
        :file-list="fileList"
        :auto-upload="false"
      >
        <el-button
          size="small"
          type="primary"
          v-loading.fullscreen.lock="fullscreenLoading"
          >点击上传</el-button
        >
        <div slot="tip" class="el-upload__tip">只能上传PDF文件</div>
      </el-upload>

2.JS代码

1）上传
on-change文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

 uploadCertificateChange(file) {
      this.$confirm("上传文件，是否继续？", "提示")
        .then(() => {
          this.fullscreenLoading = true;
          let fd = new FormData();
          fd.append("files", file.raw);
          this.$cm
            .postUploadCertificate(fd)
            .then((res) => {
              console.log(res);
              if (res.ErrorCode == "00000000") {
                this.$message.success("上传成功");
                this.certificatePath = res.Response;
              } else {
                this.$message.warning(res.Message);
                this.fileList.pop();
              }
              this.fullscreenLoading = false;
            })
            .catch((err) => {
              this.fullscreenLoading = false;
              err && this.$message.warning(err);
            });
          return true;
        })
        .catch(() => {
          this.$message.success("取消成功");
          this.fileList = [];
          return false;
        });
    },

2）预览

on-preview是点击文件列表中已上传的文件时的钩子，用于实现预览

handlePreview(file) {
	  // axios的基地址和上传文件路径同时存在时可预览
      if (this.$axios.defaults.baseURL && this.certificatePath) {
        window.open(
          this.$axios.defaults.baseURL + this.certificatePath,
          "_blank"
        );
      } else {
        this.$message.warning("暂不支持预览");
      }
},

3）删除

before-remove删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除

 beforeRemove(file, fileList) {
      // 移除前
      return this.$confirm(`确定移除 ${file.name}？`).then(() => {
        this.$message.success("已移除");
        this.certificatePath = "";
      });
    },

4）超出规定的文件上传个数限定

on-exceed文件超出个数限制时的钩子

 handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，已上传了 ${fileList.length} 个文件`
      );
    },