1点击打开自动上传

没有

:auto-upload="false"就是自动上传

2点击上传按钮上传

不自动上传:auto-upload="false"

<el-dialogstyle="background: rgb(18, 67, 112); border: 1px solid #409eff":title="上传文件":model-value="dialogVisible":before-close="cancelUpload"><el-uploadclass="upload-demo"dragaction="/接口地址"multiple:auto-upload="false":on-preview="handlePreview":on-remove="handleRemove":file-list="fileList"ref="upload"><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text"> 拖拽到此或<em>点击上传</em> </div><!--                    <template #tip>--><!--                      <div class="el-upload__tip"> 只能上传..文件，且不超过500kb </div>--><!--                    </template>--></el-upload><template #footer><span class="dialog-footer"><el-button type="primary" class="long_table" @click="submitUpload()">上 传</el-button></span></template></el-dialog>

对话框相关

el-dialog

:model-value="dialogVisible" 绑定对话框的是否打开
:before-close="cancelUpload" 点击×关闭对话框事件

上传相关

el-upload

action="接口地址"  绑定接口地址
:auto-upload="false" 不自动上传
:file-list="fileList"  这个list的显示

ref="upload"  实现后面点击上传用的

ps记得定义元素 后面省略

 const state = reactive({fileList: [],dialogVisible: false,upload: '',

      function cancelUpload() {state.dialogVisible = false;state.fileList = [];getbookList();}
function handleRemove(file, fileList) {console.log(file, fileList);
}
function handlePreview(file) {console.log(file);
}
function submitUpload(e, file, fileList) {state.upload.submit(); //将文件上传ElMessage({message: '上传成功',type: 'success',duration: '1000',});
}