需求:
在使用element ui的<el-upload>
标签时,我们会发现添加的文件会自动完成上传。
如需手动实现上传,只需使用官方提供的auto-upload
属性和submit
方法
代码实现
为标签绑定auto-upload
属性,默认值为true,传入fasle,此时添加文件便不会自动上传。
<el-upload
ref="upload" // 为了调用submit方法
:auto-upload="false" // 控制是否自动上传
action="#"
:http-request="upload"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-change="changeFile"
:before-upload="beforeUpload"
:file-list="fileList"
>
<i class="el-icon-plus" />
</el-upload>
<el-button @click="btnSubmit">上传</el-button>
而要使用上传功能,我们需要通过dom调用submit
方法。
如上,先给标签添加ref
属性,通过 this.$refs.upload.submit()
调用即可。
btnSubmit() {
this.$refs.upload.submit() // 手动上传
},