先安装 xlsx.js, 然后引入

import XLSX from 'xlsx';

代码

 <form>
<span>
<textarea name="content" v-model="content" placeholder="please fill in the sentence"></textarea>
</span>
<span class="upimg"><img :src="img"><input type="file" class="file" name="file" @change="getFile($event)"></span>
<button @click="submitForm($event)">submit</button>
</form>
 import XLSX from 'xlsx';
export default{
name: 'ssadd',
data(){
return {
content: '',
file: '',
img: '../src/assets/images/Upload-picture.png'
}
},
methods: {
//导入excel获取到内容
getFile(event){
//wb 存储读取完成的数据
//jsondata 存储获取excel json数据
var wb,jsondata,that=this;
var f = event.target.files[];
var reader = new FileReader();
reader.onload = function(e){
var data = e.target.result;
wb = XLSX.read(data, {type: "binary"});
jsondata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[]]);
// 将获取到的数据逐条连接入that.content中
for(var i=;i<jsondata.length;i++){
if(that.content==""){
that.content = jsondata[i].sentence;
}else{
that.content += ("<br/>" + jsondata[i].sentence);
} }
console.log(that.content);
}
reader.readAsBinaryString(f);
},
submitForm(event){
event.preventDefault(); let params = new URLSearchParams(); params.append('content', this.content); this.axios.post('url', params).then((ret)=>{
if(ret.status === ){
console.log(ret);
this.$router.push(ret.data.requireUrl);
}
})
}
},
mounted(){ }

后端接收并添加到数据库

代码

 <?php
require '../config/config.php';
$conn = Connect(); $patterns = array('\'', '"');
$replacements = array('&apos', '&quot'); $data = str_replace($patterns, $replacements, $_POST['content']);
$arr = explode("<br/>", $data); $sql = "INSERT INTO ssentence (content) VALUES (?)"; $stmt = mysqli_stmt_init($conn); if(mysqli_stmt_prepare($stmt, $sql)){
mysqli_stmt_bind_param($stmt, 's', $content);
// 注 此处's'如只给一个字段插入就只写一个s,插入几个字段的数据就写几个 for($i=;$i<count($arr);$i++){
$content = $arr[$i];
mysqli_stmt_execute($stmt);
} $arr=[
"status"=>,
"message"=>"add data success",
"requireUrl"=>"/sslist"
];
echo json_encode($arr);
}else{
echo "创建数据表错误:" . $conn->error;
} $conn->close();
?>

vue项目导入excel单列导入的更多相关文章

  1. 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题

    基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...

  2. vue项目导出EXCEL功能

    因为一些原因导出EXCEL功能必须前端来做,所以就研究了一下,在网上也找了一些文章来看,有一些不完整,我做完了就记录下来,供大家参考: 1.首先先安装依赖: npm install file-save ...

  3. Vue项目实现excel导出

    1.package.json里面安装三个插件 npm install  xlsx  --save npm install  script-loader  –save-dev npm install   ...

  4. C#语言-NPOI.dll导入Excel功能的实现

    前言:刚工作那会,公司有一套完善的MVC框架体系,每当有导入EXCEL功能要实现的时候,都会借用框架里自带的导入方法,一般三下五除二就完成了,快是快,可总是稀里糊涂的,心里很没有底.前几天,在另一个原 ...

  5. DevExpress XtraGrid 数据导出导入Excel

    // <summary> /// 导出按钮 /// </summary> /// <param name="sender"></param ...

  6. SQLServer导入Excel,复杂操作

    导入Excel 先导入的时候报错了, 提示未在本地计算机上注册"Microsoft.ACE.Oledb.12.0"提供程序.(System.Data),去网址下个软件安装就搞定了, ...

  7. vue项目使用js-xlsx进行excel表格的导入和导出方法的简单原型封装

    前提:已经安装好 file-saver xlsx和 script-loader,如未安装,请查看 https://www.cnblogs.com/luyuefeng/p/8031597.html 新建 ...

  8. Vue项目中导入excel文件读取成js数组

    1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...

  9. vue入坑教程(二)在vue项目中如何导入element以及sass

    在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...

随机推荐

  1. LintCode_408 二进制求和

    给定两个二进制字符串,返回他们的和(用二进制表示). 思路 string s = ""; 目标字符串 cp 存储进位;取 0或1 sum = a[i] + b[i] + cp;分为 ...

  2. Spring_总结

    spring配置Bean 配置形式 基于XML文件的方式 属性注入 构造注入 泛型依赖注入 基于注解的方式 配置方式 全类名(反射) 通过工厂方法 FactoryBean 字面值 <![CDAT ...

  3. Spring_通过Bean的Factory配置Bean

    package com.tanlei.bean.FactoryBean; import org.springframework.beans.factory.FactoryBean; public cl ...

  4. 一.JDBC学习入门

    一.JDBC相关概念介绍 1.1.数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后才能够使用声卡和网卡 ...

  5. HTML之HTML标签

    前端的三把利器:                      (1)HTML就像一个赤裸裸的人                      (2)css就好比一件衣服                   ...

  6. 【JZOJ4886】【NOIP2016提高A组集训第13场11.11】字符串

    题目描述 某日mhy12345在教同学们写helloworld,要求同学们用程序输出一个给定长度的字符串,然而发现有些人输出了一些"危险"的东西,所以mhy12345想知道对于任意 ...

  7. 【JZOJ4883】【NOIP2016提高A组集训第12场11.10】灵知的太阳信仰

    题目描述 在炽热的核熔炉中,居住着一位少女,名为灵乌路空. 据说,从来没有人敢踏入过那个熔炉,因为人们畏缩于空所持有的力量--核能. 核焰,可融真金. 咳咳. 每次核融的时候,空都会选取一些原子,排成 ...

  8. eclipse Some projects cannot be imported because they already exist in the workspace

    archive file 档案文件 删除对应的文件即可

  9. QT_OPENGL-------- 1. WINDOW

    opengl学习第一步,首先来实现一个显示窗口. 1.首先要下载配置glfw,我在前面的文章中也提到过,具体作用可以另行百度.配置出现无法引用可参考ubuntu 使用glfw.h 出现函数无法调用. ...

  10. axios细节之绑定到原型和axios的defaults的配置属性

    把axios绑定到原型 vue开发者一套很好用的实践,一般来说,实践如果能够让大部分人都接受,会逐渐成为一个默认的标准. // 把axios配置到原型上 Vue.prototype.$axios = ...