1点击打开自动上传
没有
:auto-upload="false"就是自动上传
2点击上传按钮上传
不自动上传:auto-upload="false"
html
<el-dialog
style="background: rgb(18, 67, 112); border: 1px solid #409eff"
:title="上传文件"
:model-value="dialogVisible"
:before-close="cancelUpload"
>
<el-upload
class="upload-demo"
drag
action="/接口地址"
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记得定义元素 后面省略
html
const state = reactive({
fileList: [],
dialogVisible: false,
upload: '',
javascript
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',
});
}