Vue導(dǎo)入excel文件的兩種方式(form表單和el-upload)
前言
兩種導(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ù)渲染到頁(yè)面,此處的方法是獲取導(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3使用el-upload上傳文件示例詳解
- vue使用el-upload實(shí)現(xiàn)文件上傳功能
- vue項(xiàng)目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用詳解
- vue+el-upload實(shí)現(xiàn)多文件動(dòng)態(tài)上傳
- vue使用Element el-upload 組件踩坑記
- vue結(jié)合el-upload實(shí)現(xiàn)騰訊云視頻上傳功能
- vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法
- vue?elementui?實(shí)現(xiàn)圖片上傳后拖拽排序功能示例代碼
- Vue中圖片上傳組件封裝-antd的a-upload二次封裝的實(shí)例
- Vue el-upload單圖片上傳功能實(shí)現(xiàn)
相關(guān)文章
proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定原理
這篇文章主要介紹了proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定原理,文章以介紹proxy的優(yōu)點(diǎn)開(kāi)始展開(kāi)全文內(nèi)容,圍繞proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定的相關(guān)資料,,需要的朋友可以參考一下2021-12-12
Vue3中使用styled-components的實(shí)現(xiàn)
本文主要介紹了Vue3中使用styled-components的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
vue實(shí)現(xiàn)簡(jiǎn)單圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單圖片上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
vue手寫<RouterLink/>組件實(shí)現(xiàn)demo詳解
這篇文章主要為大家介紹了vue手寫<RouterLink/>組件實(shí)現(xiàn)demo詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
VUE項(xiàng)目啟動(dòng)沒(méi)有問(wèn)題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注
這篇文章主要給大家介紹了關(guān)于VUE項(xiàng)目啟動(dòng)沒(méi)有問(wèn)題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注的相關(guān)資料,文中將遇到的問(wèn)題以及解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
Vue.js實(shí)現(xiàn)移動(dòng)端短信驗(yàn)證碼功能
現(xiàn)在的短信驗(yàn)證碼一般為4位或6位,則頁(yè)面中會(huì)相應(yīng)的顯示4個(gè)或6個(gè)文本框.好多網(wǎng)站需求都有此功能,今天小編給大家分享基于vue.js實(shí)現(xiàn)移動(dòng)端短信驗(yàn)證碼功能,需要的朋友參考下吧2017-03-03
vue雙向綁定數(shù)據(jù)限制長(zhǎng)度的方法
這篇文章主要為大家詳細(xì)介紹了vue雙向綁定數(shù)據(jù)限制長(zhǎng)度的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11
如何為vuex實(shí)現(xiàn)帶參數(shù)的 getter和state.commit
這篇文章主要介紹了如何為vuex實(shí)現(xiàn)帶參數(shù)的getter和state.commit,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01

