欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中導(dǎo)入excel文件的兩種方式及使用步驟

 更新時(shí)間:2022年12月22日 14:11:24   作者:小谷69  
這篇文章主要介紹了Vue中導(dǎo)入excel文件的兩種方式,大概有兩種導(dǎo)入文件的方法:form表單和el-upload,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

導(dǎo)入excel文件

前言

兩種導(dǎo)入文件的方法:form表單和el-upload

第一種方法:form表單

一、文件上傳的三要素是什么?

文件上傳的三要素:

  • 表單post請(qǐng)求
  • 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請(qǐng)求
  • form表單必須添加enctype=“multipart/form-data”
  • 在后端使用MultipartFile 類型 參數(shù)名必須和前端中的input中的name屬性值一致。

第二種方法:el-upload

導(dǎo)入的表格傳給后臺(tái)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">導(dǎo)入</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:{
   //導(dǎo)入表格
    handleExcel(file) {
      let formData = new FormData(); //聲明一個(gè)FormDate對(duì)象
      formData.append("formFile", file.raw);    //把文件信息放入對(duì)象中
      //調(diào)用后臺(tái)導(dǎo)入的接口
      SetPDFile(formData).then(res => {
        // console.log(res)
        if (res.Status && res.Data) {
          this.$message.success("導(dǎo)入成功");
          this.getList();   // 導(dǎo)入表格之后可以獲取導(dǎo)入的數(shù)據(jù)渲染到頁面,此處的方法是獲取導(dǎo)入的數(shù)據(jù)
        } else {
          this.$message.error(res.Message)
        }
      }).catch(err => {
        that.$message({
          type: 'error',
          message: '導(dǎo)入失敗'
        })
      })
    },
  }
}
</script>

到此這篇關(guān)于Vue中導(dǎo)入excel文件的兩種方式的文章就介紹到這了,更多相關(guān)Vue導(dǎo)入excel文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue如何動(dòng)態(tài)綁定img的src屬性(v-bind)

    vue如何動(dòng)態(tài)綁定img的src屬性(v-bind)

    這篇文章主要介紹了vue如何動(dòng)態(tài)綁定img的src屬性(v-bind),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 解決vue路由name同名,路由重復(fù)的問題

    解決vue路由name同名,路由重復(fù)的問題

    這篇文章主要介紹了解決vue路由name同名,路由重復(fù)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue項(xiàng)目中封裝axios的方法

    Vue項(xiàng)目中封裝axios的方法

    這篇文章主要介紹了Vue項(xiàng)目中封裝axios的方法,axios 是一個(gè)輕量的 HTTP客戶端,基于 XMLHttpRequest 服務(wù)來執(zhí)行 HTTP 請(qǐng)求,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-05-05
  • vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格

    vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格

    這篇文章主要介紹了vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說明

    Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說明

    這篇文章主要介紹了Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • proxy代理不生效以及vue?config.js不生效解決方法

    proxy代理不生效以及vue?config.js不生效解決方法

    在開發(fā)Vue項(xiàng)目過程中,使用了Proxy代理進(jìn)行數(shù)據(jù)劫持,但是在實(shí)際運(yùn)行過程中發(fā)現(xiàn)代理并沒有生效,也就是說數(shù)據(jù)并沒有被劫持,這篇文章主要給大家介紹了關(guān)于proxy代理不生效以及vue?config.js不生效解決方法的相關(guān)資料,需要的朋友可以參考下
    2023-11-11
  • vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)

    vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)

    所謂的vue-i18n國(guó)際化方案就是根據(jù)它的規(guī)則自己建立一套語言字典,對(duì)于每一個(gè)字(message)都有一個(gè)統(tǒng)一的標(biāo)識(shí)符,下面這篇文章主要給大家介紹了關(guān)于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • vue解決使用$http獲取數(shù)據(jù)時(shí)報(bào)錯(cuò)的問題

    vue解決使用$http獲取數(shù)據(jù)時(shí)報(bào)錯(cuò)的問題

    今天小編就為大家分享一篇vue解決使用$http獲取數(shù)據(jù)時(shí)報(bào)錯(cuò)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • html+vue.js 實(shí)現(xiàn)漂亮分頁功能可兼容IE

    html+vue.js 實(shí)現(xiàn)漂亮分頁功能可兼容IE

    功能比較簡(jiǎn)單,在單一html中使用vue.js分頁展示數(shù)據(jù),并未安裝腳手架,或使用相關(guān)UI框架,此時(shí)需要手寫一個(gè)分頁器,不失為最合理最便捷的解決方案,需要的朋友可以參考下
    2020-11-11
  • vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級(jí)教程

    vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級(jí)教程

    這篇文章主要介紹了vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級(jí)教程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04

最新評(píng)論