Vue导入excel文件的两种方式(form表单和el-upload)

目录
  • 前言
  • 第一种方法：form表单
    • 一、文件上传的三要素是什么？
    • 二、具体使用步骤
  • 第二种方法：el-upload
  • 总结

前言

两种导入文件的方法：form表单和el-upload

第一种方法：form表单

一、文件上传的三要素是什么？

文件上传的三要素：

  • 表单post请求
  • input框的type=file
  • 在form表单中添加enctype=“multipart/form-data”

二、具体使用步骤

代码如下（示例）：

<form action="/" method="post" enctype="multipart/form-data">
    <input name="photo" type="file" />
</form>

注意：

  • input框中的type属性等于file
  • form表单必须是post请求
  • form表单必须添加enctype=“multipart/form-data”
  • 在后端使用MultipartFile 类型 参数名必须和前端中的input中的name属性值一致。

第二种方法：el-upload

导入的表格传给后台form-data形式

api.js：

export function SetPDFile(formFile) {
  return request({
    url: "/Economic/SetPDFile",
    method: 'post',
    data: formFile,
  })
}

vue：

<template>
    <div>
        <el-upload
          class="upload"
          action="#"
          :show-file-list="false"
          :on-change="handleExcel"
          accept="'.xlsx','.xls'"
          :auto-upload="false"
          :headers="headers">
              <el-button size="mini" type="primary">导入</el-button>
        </el-upload>
    </div>
</template>
<script>
import { SetPDFile } from "@/api";
export default {
  data() {
    return {
        headers: {"Content-Type": "multipart/form-data;charset=UTF-8"},
    }
  },
  methods:{
   //导入表格
    handleExcel(file) {
      let formData = new FormData(); //声明一个FormDate对象
      formData.append("formFile", file.raw);    //把文件信息放入对象中
      //调用后台导入的接口
      SetPDFile(formData).then(res => {
        // console.log(res)
        if (res.Status && res.Data) {
          this.$message.success("导入成功");
          this.getList();   // 导入表格之后可以获取导入的数据渲染到页面，此处的方法是获取导入的数据
        } else {
          this.$message.error(res.Message)
        }
      }).catch(err => {
        that.$message({
          type: 'error',
          message: '导入失败'
        })
      })
    },
  }
}
</script>

总结

到此这篇关于Vue导入excel文件的两种方式的文章就介绍到这了,更多相关Vue导入excel文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue实现导入Excel功能步骤详解

    Vue实现导入Excel功能步骤详解

    1.前端主导实现步骤 第一步,点击页面上的导入按钮,读入Excel文件 利用插件完成. 第二步,按照后端的要求对数据格式加工,转成他们需要的格式 需要自己写逻辑. 第三步,通过后端接口,将数据通过ajax发回去 调接口,常规操作. 简而言之:前端读excel文件,修改文件格式,调接口 2.实现读入Excel文件 注:此步骤就可实现前端导入功能.如对修改格式有兴趣,可以继续看第三步. 概括:复制代码到自己的文件夹下,下载必需的插件. 2.1 使用的是elementUI提供的vue-admin-el

  • 详解如何实现在Vue中导入Excel文件

    详解如何实现在Vue中导入Excel文件

    目录 一.安装依赖 二.template中 三.script中js代码 以将此Excel导出为json数据为例 一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.template中 <span>导入表格</span> <input id="upload" type="file" @chan

  • vue导入处理Excel表格功能步骤详解

    vue导入处理Excel表格功能步骤详解

    目录 1. 前言 2.vue导入Excel表格 2.1 使用ElementUI中的upload组件 2.2 使用input文件上传 3. 总体代码与效果 4. 总结 1. 前言 最近遇到前端导入并处理excel表格的情况,趁此机会刚好研究一下vue导入并处理excel数据:当然自己手撸一个工具没有那么多时间,本文只是借助现有的工具来做一下工具使用总结. 2.vue导入Excel表格 vue导入Excel表格主要有两种常用的方法,一个是借助ElementUI文件上传进行表格导入,另一个是自带的in

  • Vue结合后台导入导出Excel问题详解

    最近Vue项目中用到了导入导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 导出Excel功能 这里不谈别人怎么实现的,我是从后台生成了Excel流文件返回给前端的. 下面具体看一下后台的代码: /** * 批量导出用户 * @param condition * @param response */ @PostMapping("/exportUser") public void exportUser(@RequestBody UserQu

  • Vue导入excel文件的两种方式(form表单和el-upload)

    目录 前言 第一种方法:form表单 一.文件上传的三要素是什么? 二.具体使用步骤 第二种方法:el-upload 总结 前言 两种导入文件的方法:form表单和el-upload 第一种方法:form表单 一.文件上传的三要素是什么? 文件上传的三要素: 表单post请求 input框的type=file 在form表单中添加enctype=“multipart/form-data” 二.具体使用步骤 代码如下(示例): <form action="/" method=&qu

  • Vue单页应用引用单独的样式文件的两种方式

    Vue单页应用引用单独的样式文件的两种方式

    问题描述 对于.vue的文件来说,也是由结构.行为.样式三部分组成,在样式部分有个scoped的属性,也就是当前页面有效,当style标签内样式比较多时或者.vue文件之间有重复的时候,总感觉看起来不够整洁,所以就需要引入一些公共样式.下面就先说下如何引入单独的样式文件,这里就以CSS文件为例,之后再说下我的项目中的样式文件的划分 引入单独的样式文件 方式一 在main.js中引入静态资源,这种方法使得该样式文件被项目中的组件所共享 // The Vue build version to loa

  • vue下载excel文件的四种方法实例

    目录 1.通过url下载 2.通过 a 标签 download 属性结合 blob 构造函数下载 3.通过 js-file-download 插件 4.使用fetch下载 总结 1.通过url下载 即后端提供文件的地址,直接使用浏览器去下载 通过window.location.href = 文件路径下载 window.location.href = `${location.origin}/operation/ruleImport/template` 通过 window.open(url, '_b

  • php原生导出excel文件的两种方法(推荐)

    第一种方法: $filename='文件名称'; $filetitle='你的标题'; if($_POST){ set_time_limit(10000): $title = ''; ini_set('memory_limit','300M'); header('Content-Type: application/vnd.ms-excel;charset=utf-8'); $name = $title.".xls"; header('Content-Disposition: attac

  • Python简单实现安全开关文件的两种方式

    本文实例讲述了Python简单实现安全开关文件的两种方式.分享给大家供大家参考,具体如下: 以下代码经Python3.3测试. 方式1: try: file = open('config.ini', 'w') print("It's a text file", file=file) except IOError as err: print('File error: ' + str(err)) finally: if 'file' in locals(): file.close() 方式

  • Spring加载properties文件的两种方式实例详解

    Spring加载properties文件的两种方式实例详解

    在项目中如果有些参数经常需要修改,或者后期可能需要修改,那我们最好把这些参数放到properties文件中,源代码中读取properties里面的配置,这样后期只需要改动properties文件即可,不需要修改源代码,这样更加方便.在Spring中也可以这么做,而且Spring有两种加载properties文件的方式:基于xml方式和基于注解方式.下面分别讨论下这两种方式. 1. 通过xml方式加载properties文件 我们以Spring实例化dataSource为例,我们一般会在beans

  • Laravel基础-关于引入公共文件的两种方式

    (1).首先在app\Http\routes.php中定义路由: Route::get('view','ViewController@view'); Route::get('article','ViewController@article'); Route::get('layout','ViewController@layout'); (2).然后在Http\Controllers\ViewController.php中写入方法: public function view(){ return v

  • 详解Vue中使用Echarts的两种方式

    1. 直接引入echarts 先npm安装echarts npm install echarts --save 开发: main.js import myCharts from './comm/js/myCharts.js' Vue.use(myCharts) myCharts.js /** * 各种画echarts图表的方法都封装在这里 */ import echarts from 'echarts' (function() { var chart = {}; chart.install =

  • 详解Vue路由传参的两种方式query和params

    Vue路由传参的两种方式query和params 一.router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to=&

  • JS两种类型的表单提交方法实例分析

    本文实例分析了JS两种类型的表单提交方法.分享给大家供大家参考,具体如下: 1.原始的 <form method="post" action="/student/stureg/add" id="form1" onsubmit="return subForm();"> <button type="submit" class="button red" style="

随机推荐