vue使用el-upload上传图片,但是上传完图片,总是会跳到另一个页面,这个问题怎么解决
时间: 2024-03-03 17:51:58 浏览: 19
可以通过在el-upload标签中设置属性`:auto-upload="false"`来阻止自动上传,然后在上传成功后手动跳转到其他页面。具体实现步骤如下:
1. 在模板中设置el-upload标签,设置属性`:auto-upload="false"`,如下所示:
```html
<el-upload
class="upload-demo"
action="/upload"
:auto-upload="false"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
2. 在上传成功的回调函数`handleSuccess`中,使用`this.$router.push('/otherpage')`方法手动跳转到其他页面,如下所示:
```js
methods: {
handleSuccess(res, file) {
// 上传成功后,手动跳转到其他页面
this.$router.push('/otherpage')
},
beforeUpload(file) {
// beforeUpload方法可以在上传前进行一些验证操作
// 如验证文件格式、文件大小等
return true
}
}
```
这样就可以在上传图片后,手动跳转到其他页面,而不会跳转到默认的上传成功页面了。