vue+flask 一次性上传多个文件，并一次性下载

最新推荐文章于 2024-09-10 07:16:38 发布

原创

最新推荐文章于 2024-09-10 07:16:38 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #python

本文介绍如何使用ElementUI实现文件上传及下载功能。通过拖拽或点击上传docx文件，并利用加载提示显示上传状态，上传成功后启用下载功能。

前端使用的是elementui组件
上传文件后把上传文件的按钮禁用掉，防止多次点击上传，而且上传完文件是一个耗时的操作，使用elementui的loading以表明上传的状态

  <div class="upload-file">
    <!-- 拖拽上传区域 -->
    <el-upload
      ref="upload"
      action="#"
      multiple
      accept=".docx,.doc"
      :file-list="fileList"
      :auto-upload="false"
      drag
      :on-change="handleChange"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        Drop file here or <em>click to upload</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          Currently only docx format is supported
        </div>
      </template>
    </el-upload>
    <el-button
      style="margin-left: 10px"
      type="success"
      @click="submitFileForm"
      :disabled="subButton"
      v-loading="loading"
      element-loading-text="Loading..."
      :element-loading-spinner="svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
    element-loading-background="rgba(122, 122, 122, 0.8)"
      >Upload</el-button
    >

    <el-button
      style="margin-left: 10px"
      type="success"
      @click="downloadFile"
      v-show="downButton"
      >Download</el-button
    >
  </div>



data