elementUI实现上传excel文件并传给后端

宁顾取。

于 2024-06-18 10:25:18 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端一小步文章标签： elementui excel javascript

本文链接：https://blog.csdn.net/weixin_54446335/article/details/139765813

我们选择一个按钮来实现上传，点击上传按钮，可从本地选择文件上传，确定后传递给后端。

首先，封装一个按钮：

                    <el-upload
                        style="display: inline-block"
                        action="string"
                        :limit="1"
                        :file-list="fileList"
                        :on-error="loadFileError"
                        :on-success="loadFileSuccess"
                        :before-upload="beforeUpload"
                        accept=".xlsx,.xls"
                        :show-file-list="false"
                        :http-request="uploadFile"
                    ><el-button type="primary" plain>导入关联商品</el-button></el-upload>

我们来看一下这里面的每个属性的作用：

limit: 代表一次可上传的文件数量
file-list： 代表自己定义的属性
on-error： 代表导入文件失败的时候提示的方法
on-success：代表导入文件成功提示的方法
before-upload：代表在上传前检查文件的格式、数据大小、信息等，判定文件是否能够上传
show-file-list：代表是否显示文件列表，false不显示
http-request：本次用来进行上传给后端