在iview中使用upload组件上传文件之前先做其他的处理

<template> <div style="padding:50px;"> <Button style="width:150px;" type="primary" @click="beforeUpload">上传</Button> <Upload ref="upload" action="//jsonplaceholder.typicode.com/posts/" :on-success="successHandle" :data="uploadParams" > </Upload> <Modal v-model="show" title="上传前请先选择地域"> <Select v-model="city" placeholder="Select your city"> <Option value="beijing">New York</Option> <Option value="shanghai">London</Option> <Option value="shenzhen">Sydney</Option> </Select> <!-- 不能用Modal默认的提交，不然做不了校验，@on-ok="selectedCity" --> <template #footer> <Button @click="show=false">取消</Button> <Button type="primary" @click="selectedCity">确定</Button> </template> </Modal> </div> </template> <script> export default { name: "beforeUpload", data() { return { uploadParams:{}, // 上传接口需要带的参数 show:false, city:"", // 上传前需要选择城市 } }, methods:{ successHandle() {}, beforeUpload() { this.show = true; this.city = ""; }, selectedCity() { if(this.city) { this.show = false; this.$refs.upload.handleClick(); // 使用这个方法 } else { this.$Message.warning("请选择城市") this.show = true; } } } } </script> <style scoped> </style>

通过ref来 this.$refs.upload.handleClick(); // 使用这个方法

GIF 2024-1-5 23-56-27.gif