题引:
日常开发系统的时候,我们都会有上传文件的功能。但是用原生的文件上传是很繁琐的,那么我们都会选择使用UI组件库,如element-plus、ant-design等。这些UI组件库是非常容易上手且实用的,但是万恶的需求是奇怪多变的,我们单纯使用组件库默认的上传方式是不符合我们的需求的,如不自动上传、上传各个阶段时进行监听等,那这个时候我们使用 自定义上传 就显得肥肠合适。
正文:
我遇到的问题是选择阶段进行文件信息获取并进行特殊处理,并处理成手动上传,于是我很果断选择自定义上传来处理。下面直接放代码。
<el-uploadclass="upload-demo"ref="xlsUpload"action="":show-file-list="false":file-list="fileList":http-request="handleFileUpload">上传
</el-upload>
当我们使用 自定义上传 的时候,需要两步
1.把 action 赋值为空字符串
2.添加 :http-request"
当我们完成上面两步时,那么我们就可以在 http-request 对应的回调函数进行逻辑处理: 下面我简单写了一些常用的判断
// 自定义上传事件
handleFileUpload({ file }) {// file里面包含所选择的文件信息// 如果文件类型不符合