element upload组件 先唤醒文件选择框,选中文件后不直接上传,点文件上传按钮后再发送请求上传文件,代码实现
时间: 2024-02-27 13:58:51 浏览: 152
您可以使用Element UI中的Upload组件,结合自定义触发上传的方式来实现您的需求。
首先,将Upload组件设置为手动上传模式,通过设置`:auto-upload="false"`来实现:
```html
<el-upload
class="upload-demo"
action="/upload"
:auto-upload="false"
:on-change="handleUploadChange"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" :disabled="!uploadDisabled" @click="handleUpload">上传文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
接着,在`handleUploadChange`方法中获取选择的文件列表,并将其存储到`selectedFileList`中:
```javascript
data() {
return {
selectedFileList: [],
uploadDisabled: true
}
},
methods: {
handleUploadChange(file, fileList) {
this.selectedFileList = fileList;
this.uploadDisabled = false;
},
handleUpload() {
// 上传文件的逻辑,可参考官方文档
}
}
```
最后,在上传按钮的点击事件中调用上传文件的逻辑,可参考官方文档进行实现。同时,需要根据`selectedFileList`来判断是否有文件被选中,如果没有则禁用上传按钮。
```javascript
handleUpload() {
if (this.selectedFileList.length === 0) {
return;
}
// 上传文件的逻辑,可参考官方文档
}
```
这样就实现了先选中文件后再上传的功能。
阅读全文