element upload 设置http-request,auto-upload为false,开启drag后怎么才能去触发beforeUpload
时间: 2024-03-02 17:49:37 浏览: 138
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
如果您在使用 Element 的 Upload 组件时设置了 `http-request` 属性,并且将 `auto-upload` 属性设置为 false,同时开启了 `drag` 属性(即拖拽上传),但是 `before-upload` 事件仍然没有触发,可以尝试以下解决方案:
1. 确保 `before-upload`、`http-request`、`auto-upload` 和 `drag` 属性都被正确设置了。
2. 检查上传的文件是否符合 `before-upload` 方法中的验证规则,如果文件不符合规则,`before-upload` 方法将不会触发。
3. 检查上传按钮是否正确绑定了 `uploadFiles` 方法。在 `auto-upload` 为 false 的情况下,需要手动调用 `uploadFiles` 方法来触发上传操作。
4. 尝试在 `uploadFiles` 方法中手动触发 `before-upload` 方法,可以通过在 `uploadFiles` 方法中调用 `beforeUpload` 方法来实现,例如:
```
<el-upload
:before-upload="beforeUpload"
:http-request="httpRequest"
:auto-upload="false"
:drag="true"
>
...
</el-upload>
methods: {
beforeUpload(file) {
// ...
},
httpRequest(params) {
// ...
},
uploadFiles() {
// 手动触发 beforeUpload 方法
this.beforeUpload(this.uploadFilesList[0])
// 手动调用上传方法
if (this.dragging) {
this.$refs.upload.submit(this.uploadFilesList)
} else {
this.$refs.upload.submit()
}
}
}
```
注意,在拖拽上传时,需要将上传的文件列表作为参数传递给 `submit` 方法。同时,需要判断当前是否处于拖拽状态,如果是,则调用 `submit` 方法时需要传递文件列表参数。
这样就可以手动触发 `before-upload` 方法,并且手动调用上传方法了。
阅读全文