vue简单的文件上传及下载

最新推荐文章于 2024-09-14 10:03:49 发布

KLOCIC

最新推荐文章于 2024-09-14 10:03:49 发布

阅读量750

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_42376785/article/details/123573549

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在前端使用Element UI组件实现文件上传和下载功能。代码示例包括上传时的回调处理，成功和失败的提示，以及如何创建链接进行文件下载。此内容对于前端开发者了解文件操作流程具有参考价值。

摘要由CSDN通过智能技术生成

1.上传代码

 <el-upload :action="'/xxx'" :on-success="handleSuccess" :on-change="handleChangePic" accept=".xls,.xlsx">
        <el-button size="small" type="primary">上传资料</el-button>
 </el-upload>

 methods: {
    handleSuccess(res, file) {
      // action 上传时的回调
      this.ifload = false;
      if (res.code === 200) {
        this.$message.success('文件导入成功');
        this.fileList = [];
        this.handleClose();
      } else {
        this.$message.error(res.msg || '文件导入失败，稍后重试');
      }
    }
}

2.下载代码

<el-button type="primary" size="small" @click="download">下载模板</el-button>

methods: {
     download() {
      const a = document.createElement('a');
      a.target = '_blank';
      a.href = `/xxx`;
      document.body.appendChild(a);
      a.click();
    },
}