Vue中導(dǎo)入excel文件的兩種方式及使用步驟
導(dǎo)入excel文件
前言
兩種導(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>
到此這篇關(guān)于Vue中導(dǎo)入excel文件的兩種方式的文章就介紹到這了,更多相關(guān)Vue導(dǎo)入excel文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue如何動態(tài)綁定img的src屬性(v-bind)
這篇文章主要介紹了vue如何動態(tài)綁定img的src屬性(v-bind),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue中用js如何實現(xiàn)循環(huán)可編輯表格
這篇文章主要介紹了vue中用js如何實現(xiàn)循環(huán)可編輯表格,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09Vuepress生成文檔部署到gitee.io的注意事項及說明
這篇文章主要介紹了Vuepress生成文檔部署到gitee.io的注意事項及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09proxy代理不生效以及vue?config.js不生效解決方法
在開發(fā)Vue項目過程中,使用了Proxy代理進(jìn)行數(shù)據(jù)劫持,但是在實際運(yùn)行過程中發(fā)現(xiàn)代理并沒有生效,也就是說數(shù)據(jù)并沒有被劫持,這篇文章主要給大家介紹了關(guān)于proxy代理不生效以及vue?config.js不生效解決方法的相關(guān)資料,需要的朋友可以參考下2023-11-11vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)
所謂的vue-i18n國際化方案就是根據(jù)它的規(guī)則自己建立一套語言字典,對于每一個字(message)都有一個統(tǒng)一的標(biāo)識符,下面這篇文章主要給大家介紹了關(guān)于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關(guān)資料,需要的朋友可以參考下2022-12-12vue解決使用$http獲取數(shù)據(jù)時報錯的問題
今天小編就為大家分享一篇vue解決使用$http獲取數(shù)據(jù)時報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10html+vue.js 實現(xiàn)漂亮分頁功能可兼容IE
功能比較簡單,在單一html中使用vue.js分頁展示數(shù)據(jù),并未安裝腳手架,或使用相關(guān)UI框架,此時需要手寫一個分頁器,不失為最合理最便捷的解決方案,需要的朋友可以參考下2020-11-11vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級教程
這篇文章主要介紹了vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級教程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04