2023.2.2今天我学习了如何使用el-upload组件进行上传文件。
效果:
传统方法:
直接看官方文档,但是官方文档的接口是静态的。
Element - The world's most popular Vue UI framework
特殊方法:
走动态的后端接口。
js代码如下:
精简版:
action=""
:http-request="upload_request"
完整版:
<!--drag设置可拖动-->
<!--accept=".xlsx"设置上传的文件类型-->
<!--:limit=1上传文件的最大个数-->
<!--:auto-upload="false"是否在选取后直接上传-->
<!--:before-upload="beforeUploadFile"上传文件之前的钩子-->
<!--:on-change="fileChange"文件状态改变时的钩子-->
<!--:on-remove="fileRemove"文件列表移除文件时的钩子-->
<!--:on-exceed="exceedFile"文件超出个数限制-->
<!--:on-success="upload_success"文件上传成功的钩子-->
<el-form-item label="选择文件:">
<el-upload
drag
:limit=limitNum
name="file"
ref="upload"
action=""
:http-request="upload_request"
accept=".xlsx"
:headers="headers"
:with-credentials="true"
:file-list="fileList"
:before-upload="beforeUploadFile"
:before-remove="beforeRemove"
:on-exceed="exceedFile"
:on-remove="fileRemove"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传xlsx文件,且上传数据尽量不超过10000条</div>
</el-upload>
</el-form-item>