el-upload中:禁用默认的actions请求路径之后,on-success方法不执行解决方式
时间: 2024-05-05 20:21:58 浏览: 56
在禁用默认的 actions 请求路径之后,可以通过监听 `change` 事件来手动发送上传请求,并在请求成功后触发 `on-success` 方法。
具体实现步骤如下:
1. 在 `el-upload` 中设置 `:auto-upload="false"` 禁用默认的上传行为。
2. 监听 `change` 事件,在事件回调函数中手动发送上传请求。
3. 在请求成功后,手动触发 `on-success` 方法。
代码示例:
```vue
<template>
<el-upload
class="upload-demo"
action="/api/upload"
:auto-upload="false"
:on-change="handleChange"
:on-success="handleSuccess"
:file-list="fileList"
list-type="picture"
:multiple="false">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
}
},
methods: {
handleChange(file) {
// 手动发送上传请求
this.$refs.upload.submit();
},
handleSuccess(response, file, fileList) {
// 手动触发 on-success 方法
this.$emit('on-success', response, file, fileList);
}
}
}
</script>
```
阅读全文