el-upload上传文件,如何使用action、auto-upload

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',
  });
}
相关推荐
涔溪1 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾1 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的1 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句1 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6661 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞1 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀1 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko1 小时前
HTML 常用标签速查表
前端·html
gis收藏家2 小时前
从稀疏数据(CSV)创建非常大的 GeoTIFF(和 WMS)
前端
程序视点2 小时前
望言OCR 2025终极评测:免费版VS专业版全方位对比(含免费下载)
前端·后端·github