vue中实现附件上传

前言

本篇主要记录在 Vue项目中 实现附件上传功能，可实现单/多附件上传，识别文件格式并用不同图标展示功能，及控制是否可编辑功能。内容简洁易懂，如有需要可自取。
完整代码点击这里click

核心代码

  
上传附件
  

 openFileSelect() {
  // dispatchEvent 向一个指定的事件目标派发一个事件
    this.$refs.fileInput.dispatchEvent(new MouseEvent('click'));
 }

  // 多附件上传
  async uploadFile() {
    let _this = this;
    this.loading = true;
    // 获取上传的文件，如要限制文件上传数量可以 
    // let files = [...this.$refs.fileInput.files].splice(0,limit);
    // 也可以在此处抛出文件数量超出限制的提示
    let files = [...this.$refs.fileInput.files];
    if (!files || !files.length) {
      return;
    }
    // 后端接口地址
    let url = `url`;

    // 一起请求后端接口
    Promise.all(
      files.slice(0, files.length).map((file) => {
        const data = new FormData();
        data.append('file', file);
        return request.post(url, data, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
      })Ï
    ).then((res) => {
        _this.loading = false;
        _this.$refs.fileInput.value = null;
      })
      .catch((err) => {
        console.log(err);
      });
  }

文件展示部分代码

此部分使用了 vux 组件库，该部分处理了word、excel、ppt、pdf、image、txt格式的文件展示问题，其它类型的文件均展示位“其它”，也可以自行更换矢量图，iconfont 中可以查找到。遍历的数据字段可根据自己的数据格式进行修改。

展示效果图