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

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

 更新時間:2022年11月12日 10:37:27   作者:小谷69  
最近開發(fā)遇到一個點擊導(dǎo)入按鈕讓excel文件數(shù)據(jù)導(dǎo)入的需求,下面這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)入excel文件的兩種方式,分別是form表單和el-upload兩種方法,需要的朋友可以參考下

前言

兩種導(dǎo)入文件的方法: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 類型 參數(shù)名必須和前端中的input中的name屬性值一致。

第二種方法:el-upload

導(dǎo)入的表格傳給后臺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(); //聲明一個FormDate對象
      formData.append("formFile", file.raw);    //把文件信息放入對象中
      //調(diào)用后臺導(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>

總結(jié)

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

相關(guān)文章

  • proxy實現(xiàn)vue3數(shù)據(jù)雙向綁定原理

    proxy實現(xiàn)vue3數(shù)據(jù)雙向綁定原理

    這篇文章主要介紹了proxy實現(xiàn)vue3數(shù)據(jù)雙向綁定原理,文章以介紹proxy的優(yōu)點開始展開全文內(nèi)容,圍繞proxy實現(xiàn)vue3數(shù)據(jù)雙向綁定的相關(guān)資料,,需要的朋友可以參考一下
    2021-12-12
  • Vue3中使用styled-components的實現(xiàn)

    Vue3中使用styled-components的實現(xiàn)

    本文主要介紹了Vue3中使用styled-components的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-05-05
  • 基于Vue實現(xiàn)拖拽效果

    基于Vue實現(xiàn)拖拽效果

    這篇文章主要介紹了基于Vue實現(xiàn)拖拽效果,文中給大家介紹了clientY pageY screenY layerY offsetY的區(qū)別講解,需要的朋友可以參考下
    2018-04-04
  • vue實現(xiàn)簡單圖片上傳功能

    vue實現(xiàn)簡單圖片上傳功能

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡單圖片上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue手寫<RouterLink/>組件實現(xiàn)demo詳解

    vue手寫<RouterLink/>組件實現(xiàn)demo詳解

    這篇文章主要為大家介紹了vue手寫<RouterLink/>組件實現(xiàn)demo詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • VUE項目啟動沒有問題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注

    VUE項目啟動沒有問題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注

    這篇文章主要給大家介紹了關(guān)于VUE項目啟動沒有問題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注的相關(guān)資料,文中將遇到的問題以及解決的方法介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • Vue.js實現(xiàn)移動端短信驗證碼功能

    Vue.js實現(xiàn)移動端短信驗證碼功能

    現(xiàn)在的短信驗證碼一般為4位或6位,則頁面中會相應(yīng)的顯示4個或6個文本框.好多網(wǎng)站需求都有此功能,今天小編給大家分享基于vue.js實現(xiàn)移動端短信驗證碼功能,需要的朋友參考下吧
    2017-03-03
  • vue雙向綁定數(shù)據(jù)限制長度的方法

    vue雙向綁定數(shù)據(jù)限制長度的方法

    這篇文章主要為大家詳細(xì)介紹了vue雙向綁定數(shù)據(jù)限制長度的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • 如何為vuex實現(xiàn)帶參數(shù)的 getter和state.commit

    如何為vuex實現(xiàn)帶參數(shù)的 getter和state.commit

    這篇文章主要介紹了如何為vuex實現(xiàn)帶參數(shù)的getter和state.commit,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • 一篇文章帶你了解Vue組件的創(chuàng)建和使用

    一篇文章帶你了解Vue組件的創(chuàng)建和使用

    這篇文章主要為大家介紹了Vue組件的創(chuàng)建和使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-12-12

最新評論