前端 - vue - - elementui上传文件组件封装

场景：

在大多数的后台管理系统开发中 都会有上传文件/图片的操作 后端需要我们传file或者formdata对象 我们可以基于elementui的upload控件实现（大多数ui库的实现原理相同）

elementui的upload控件提供了各种配置 我们需要用到的有 list-type（文件列表表现类型）、file-list（绑定的文件数据）、limit（限制上传个数）、accept（限制上传类型）、before-upload（上传前的回调）、http-request（自定义上传）、on-remove（移除时的回调）、v-loading（加载中效果 看需求而定）【点击跳转至elementui upload控件官方文档】

html：

    
    
      点击上传
    
      
        文件类型为
        {{ accept }}
        
        ,最多上传{{ limit }}个文件
        
        ，且不超过 {{ fileSize }}M
        
        
          （建议图片长为{{ fileDimension[0] }}px, 宽为{{ fileDimension[1] }}px）
        
      
    
      
    

js：

// 封装为公共组建的传值配置
props: {
    // 最大上传数量
    limit: {
      default: () => 1,
      type: [Number, String],
    },
    // 上传文件\图片
    listType: {
      //text/picture/picture-card
      type: String,
      default: () => "text",
    },
    // 上传文件类型
    accept: {
      type: String,
    },
    // 文件大小 单位为M
    fileSize: [Number, String],
    // 图片长宽比 如：长2 宽1 及为2
    fileDimension: Array,
    // 动态接口地址
    MinioUrl: {
      default: () => "sport",
    },
  },
  data() {
    return {
      fileList: [], // 绑定的值
      dataList: [], // 处理删除的值
      isLoading: false, // 加载效果
    };
  },
  created() {},
  computed: {
    // 动态class 判断是否达到最大个数限制
    disabledTwo() {
      return this.fileList.length  this.fileSize * 1024 * 1024) {
          this.$message.error("文件过大，请重新选择");
          return false;
        }
      }
      // 尺寸 可强制限制 也可不限制
      // if (this.fileDimension) {
        // 转base64后获取图片大小
      //   fileToBaser64(file, (img) => {
      //     const res = (img.width / img.height).toFixed(1);
      //     if (res === this.fileDimension) return false;
      //  });
      // }
      return true;
    },
    // 移除图片
    async handleRemove(file) {
      // 处理未上传图片但数据回显情况
      if (!this.dataList.length) this.dataList = this.fileList;
      const i = this.dataList.findIndex((ele) => ele.url === file.url);
      const urlArr = this.dataList[i].url.split("/");
      // 编辑记录中删除图片需要同步更新记录中存储图片的字段
       await removeFileApi(
         this.MinioUrl,
         urlArr[urlArr.length - 2] + "/" + urlArr[urlArr.length - 1]
       );
      this.dataList.splice(i, 1);
      this.fileList.splice(i, 1);
      // 返回给父组件值 便于进行保存操作
      this.$emit("fileUploadChange", this.dataList);
    },
    // 上传
    async handleUpload(val) {
      this.isLoading = true;
      // 接口要求formdata对象 初始化formdata并添加值
      const formdata = new FormData();
      formdata.append("file", val.file);
      try {
        const { data } = await uploadFileApi(this.MinioUrl, formdata);
        const fileItem = {
          uid: val.file.uid,
          url: data,
          name: val.file.name,
        };
        // 更新 dataList
        this.dataList.push(fileItem);
        // 检查 fileList 中是否已存在相同文件
        const isDuplicate = this.fileList.some(
          (item) => item.uid === fileItem.uid || item.name === fileItem.name
        );
        if (!isDuplicate) {
          this.fileList.push(fileItem);
        }
        // 更新 fileList
        // this.fileList.push(fileItem);
        // 通知父组件文件上传变化
        this.$emit("fileUploadChange", this.dataList, val.file.name);
      } catch (error) {
        console.error("文件上传失败:", error);
        this.$message.error("文件上传失败，请稍后再试");
      } finally {
        this.isLoading = false;
      }
    },
  },

获取图片尺寸的方法：

// file转base64 原理就是转为base64渲染在img标签中获取宽高
export const fileToBaser64 = (file, callback) => {
  var reader = new FileReader();
  reader.onload = function (event) {
    var base64 = event.target.result;
    var img = document.createElement("img");
    img.src = base64;
    img.onload = function () {
      callback(img);
    };
  };
  reader.readAsDataURL(file);
};

css：

// 控制上传按钮隐藏
.noUpload {
  ::v-deep .el-upload {
    display: none !important;
  }
  ::v-deep .el-upload--picture-card {
    display: none !important;
  }
}

选择图片后立即上传会有两个问题：

1、用户上传图片后 不保存信息 那么这个图片就会占用服务器资源 

2、用户移除图片后 未保存信息并且刷新页面 图片依旧会渲染出来 但根据路径访问图片却访问不到 服务器中也不存在该图片 解决办法：

二者共同的解决方法：

1、后端写定时任务，定时清理服务器中存在但不存在与表中的图片；

2、点击保存按钮后再走上传接口；

此文章只考虑小文件上传 大文件用常规上传方法会很慢导致接口超时 也有可能导致接口奔溃