一、功能描述
项目中需要实现将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标签:

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

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