基于elementUI 的上传、下载文件功能

关于上传功能，采用按钮形式，上传Excel文件的功能实现：

<el-upload
     class="upload-demo m-l-10"
     ref="upload"
     accept=".xls, .xlsx"
     :action="update_action_url"
     :on-error="uploadError"
     :on-success="uploadSuccess"
     :before-upload="beforeUpload"
     :show-file-list="false"
>
     <el-button slot="trigger" type="primary" icon="el-icon-upload2">
        上传
     </el-button >
</el-upload>

上传功能常用参数：

action	必选参数，上传的地址(api)
before-upload	文件上传前的操作，一般对上传格式做处理
on-success	文件上传成功时的钩子
on-error	文件上传失败时的钩子
accept	接受上传的文件类型
show-file-list	是否显示已上传文件列表

事件方法：

    uploadError() {
        this.$notify.error({
          title: '上传失败',
          message: '只能上传excel或csv文件'
        });
    },
    uploadSuccess() {
      this.$notify({
          title: '导入成功',
          message: '请刷新查看',
          type: 'success'
        });
      //重新获取数据列表
      this.init();
    },
    beforeUpload(file) {
      // 使用正则判断文件后缀名
      const fileSuffix = file.name.match(/\.[^/.]+$/)[0];
      // 是否存在白名单中
      const whiteList = new Set(".xls", ".xlsx"]);
      if (!whiteList.has(fileSuffix)) return;
    },

常用下载功能：

window.open("文件地址")

基于elementUI 的上传、下载文件功能

悦读