您正在使用IPV4(3.236.138.35)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头       悟空收录网      

【腾讯云】云服务器等爆品抢先购,低至4.2元/月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2023年 元宵节 8
2023年 情人节 17
2024年 元 旦 338
2024年 春 节 378
 
您现在的位置:首页 >> 脚本程序 >> 内容
本类新增
本类热门文章
Vue导入excel文件的两种方式(form表单和el-upload)
内容摘要: 第一种方法:form表单一、文件上传的三要素是什么?文件上传的三要素:表单post请求input框的type=file在form表单中添加enctype=“multipart/form-data”二、具体使用步骤代码如下(示例):formaction='/'method='post'enctype='multipart/form-data'inputname......
第一种方法:form表单

一、文件上传的三要素是什么?

文件上传的三要素:

表单post请求

input框的type=file

在form表单中添加enctype=“multipart/form-data”

二、具体使用步骤

代码如下(示例):

<formaction="/"method="post"enctype="multipart/form-data">

<inputname="photo"type="file"/>

</form>

注意:

input框中的type属性等于file

form表单必须是post请求

form表单必须添加enctype=“multipart/form-data”

在后端使用MultipartFile类型参数名必须和前端中的input中的name属性值一致。

第二种方法:el-upload

导入的表格传给后台form-data形式

api.js:

exportfunctionSetPDFile(formFile){

returnrequest({

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-buttonsize="mini"type="primary">导入</el-button>

</el-upload>

</div>

</template>

<script>

import{SetPDFile}from"@/api";

exportdefault{

data(){

return{

headers:{"Content-Type":"multipart/form-data;charset=UTF-8"},

}

},

methods:{

//导入表格

handleExcel(file){

letformData=newFormData();//声明一个FormDate对象

formData.append("formFile",file.raw);//把文件信息放入对象中

//调用后台导入的接口

SetPDFile(formData).then(res=>{

//console.log(res)

if(res.Status&&res.Data){

this.$message.success("导入成功");

this.getList();//导入表格之后可以获取导入的数据渲染到页面,此处的方法是获取导入的数据

}else{

this.$message.error(res.Message)

}

}).catch(err=>{

that.$message({

type:'error',

message:'导入失败'

})

})

},

}

}

</script>

版权声明:本内容来源于脚本之家,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:js 对url进行编码和解码 下一篇:js实现碰撞检测
发布日期:2022/11/15
手机扫二维码直达本页
发布时间:19:21:39
点  击:13
录  入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.3.5.220928(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2023