利用element-puls实现文件上传需要用到的钩子，及其一些功能的实现

效果如下：

<el-upload
    action="/api/v1/regulars/fileUpload"
    v-model:file-list="dep_evaluate_annex"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :headers="setFileUploadToken()"
    :on-success="uploadSuccess"
    multiple
>
    <el-button
      size="small"
      type="primary"
      style="background: #fff !important;color: #409eff;"
    >点击上传</el-button>
</el-upload>

一般需要用到的属性钩子如下：

action	请求 URL
file-list / v-model:file-list	默认上传文件
on-preview	点击文件列表中已上传的文件时的钩子
on-remove	文件列表移除文件时的钩子
before-remove	删除文件之前的钩子，参数为上传的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，则停止删除。
headers	设置上传的请求头部
on-success	文件上传成功时的钩子
multiple	是否支持多选文件

各个部分的逻辑大致如下：

import { ElMessageBox } from "element-plus";
dep_evaluate_annex: { name: string; url: string }[] = [];

//on-preview 点击文件列表中已上传的文件时的钩子
handlePreview = (uploadFile) => {
    console.log("上传", uploadFile);
};
//on-remove 点击文件列表中已上传的文件时的钩子
//删除一个文件
handleRemove = (file, uploadFiles) => {
    this.state.form.dep_evaluate_annex = uploadFiles.map((e) => ({
      name: e.name,
      url: e.url,
    }));
};
//before-remove 删除文件之前的钩子，参数为上传的文件和文件列表
beforeRemove = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(`确定要删除 ${uploadFile.name} 吗 ?`)
      .then(() => true)
      .catch(() => Promise.reject(false));
};
//headers 设置上传的请求头部
setFileUploadToken() {
    const token: string = getToken();
    return {
      Authorization: "Bearer " + token,
    };
  }
//on-success 文件上传成功时的钩子
uploadSuccess(thumbnail: any, file: any) {
    console.log(
      "this.state.form.dep_evaluate_annex",
      this.state.form.dep_evaluate_annex
    );
    this.state.form.dep_evaluate_annex.push({
      name: file.name,
      url: file.response.data || file.response.url,
    });
 }
 

额外功能

before-upload 文件大小限制

before-upload	上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。

 // :before-upload="beforeAvatarUpload" 上传之前
  beforeAvatarUpload(file: any) {
    if (file.type != "image/jpeg" && file.type != "image/png" && file.type != "application/pdf") {
      ElMessage.error("只能上传 jpg/png/pdf 文件");
      return false;
    }
    // 取消文件大小限制
    // if (file.size / 1024 / 1024 > 2) {
    //   ElMessage.error("上传文件大小不超过2MB");
    //   return false;
    // }
    return true;
}

accept 限制文件类型

accept=".jpg, .png, .pdf"

limit 限制文件个数

属性

:limit="1"
:on-exceed="handleExceed"

// 超出限制
  handleExceed(uploadFile, uploadFiles) {
    ElMessage.error('最多只能上传一个文件')
  }