您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue導入excel文件的方式有哪些”的相關(guān)知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“Vue導入excel文件的方式有哪些”文章能幫助大家解決問題。
兩種導入文件的方法:form表單和el-upload
文件上傳的三要素:
表單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屬性值一致。
導入的表格傳給后臺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">導入</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:{ //導入表格 handleExcel(file) { let formData = new FormData(); //聲明一個FormDate對象 formData.append("formFile", file.raw); //把文件信息放入對象中 //調(diào)用后臺導入的接口 SetPDFile(formData).then(res => { // console.log(res) if (res.Status && res.Data) { this.$message.success("導入成功"); this.getList(); // 導入表格之后可以獲取導入的數(shù)據(jù)渲染到頁面,此處的方法是獲取導入的數(shù)據(jù) } else { this.$message.error(res.Message) } }).catch(err => { that.$message({ type: 'error', message: '導入失敗' }) }) }, } } </script>
關(guān)于“Vue導入excel文件的方式有哪些”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。