vue项目导入excel单列导入

先安装 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[0];
                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[0]]);
                    // 将获取到的数据逐条连接入that.content中
                    for(var i=0;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 === 200){
                        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=0;$i<count($arr);$i++){
            $content = $arr[$i];
            mysqli_stmt_execute($stmt);
        }

        $arr=[
                "status"=>200,
                "message"=>"add data success",
                "requireUrl"=>"/sslist"
            ];
        echo json_encode($arr);
    }else{
        echo "创建数据表错误：" . $conn->error;
    }
    

    $conn->close();
 ?>