导入excel表格功能实现

                                          

一、功能描述

        项目中需要实现将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标签:


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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容