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)文章希望大家以后多多支持腳本之家!
- vue3使用el-upload上傳文件示例詳解
- vue使用el-upload實現(xiàn)文件上傳功能
- vue項目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用詳解
- vue+el-upload實現(xiàn)多文件動態(tài)上傳
- vue使用Element el-upload 組件踩坑記
- vue結(jié)合el-upload實現(xiàn)騰訊云視頻上傳功能
- vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法
- vue?elementui?實現(xiàn)圖片上傳后拖拽排序功能示例代碼
- Vue中圖片上傳組件封裝-antd的a-upload二次封裝的實例
- Vue el-upload單圖片上傳功能實現(xiàn)
相關(guān)文章
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-12Vue3中使用styled-components的實現(xiàn)
本文主要介紹了Vue3中使用styled-components的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05vue手寫<RouterLink/>組件實現(xiàn)demo詳解
這篇文章主要為大家介紹了vue手寫<RouterLink/>組件實現(xiàn)demo詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06VUE項目啟動沒有問題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注
這篇文章主要給大家介紹了關(guān)于VUE項目啟動沒有問題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注的相關(guān)資料,文中將遇到的問題以及解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05如何為vuex實現(xiàn)帶參數(shù)的 getter和state.commit
這篇文章主要介紹了如何為vuex實現(xiàn)帶參數(shù)的getter和state.commit,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01