美文网首页
导入excel表格功能实现

导入excel表格功能实现

作者: 要翻身的咸鱼_61da | 来源:发表于2019-02-22 14:46 被阅读0次

                                              

    一、功能描述

            项目中需要实现将excel表格导入页面的功能,后端给了一个接口,传两个参数token和formData格式的文件对象。token大家都知道,那么formData是什么呢?FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。

    二、功能实现

            那么最重要的就是获取到file的formData形式参数,首先添加一个选择文件的输入框,并限定输入文件的格式。

        然后在mounted里面监听input选择文件,当你点击选择文件的时候就会自动触发主函数readExcel。主函数传入event这个参数,后面用。不啰嗦,上代码:

    再然后就是在主函数readExcel()里面获取文件信息对象:

    new一个formData对象,将文件信息对象添加到formData对象里面就得到我想要的file的formData形式参数了,至此,我要的参数file在formData上面了。

    发请求的时候参数这样写:file:formdata就ok了,第一次用formData参数的一点心得,第一篇文章,大家不喜勿喷,欢迎指教。

    三、样式优化

            哈,功能是写完啦,只要发请求就可以了,但是type=file的默认样式有点太丑了不是吗?影响视觉,大佬们看了还得了,还是改改吧。

    在input外面包个a标签:

    下面是一些样式,有些非必须,是根据我的项目写的,读者可自行修改:

    有点长哈,我也是网上粘贴过来直接用再修修改改。还是那句别喷我。样式挺好看的。满意。今天就酱紫啦。

    相关文章

      网友评论

          本文标题:导入excel表格功能实现

          本文链接:https://www.haomeiwen.com/subject/qyceyqtx.html