flask vue elementui进行文件的上传和下载

使用flask和vue(elementui)进行文件的上传和下载，前端将文件传给后端，后端处理后前端可进行下载，后端处理文件需要一定的时间，所有前端在等待的时候设置进度条，其实上传和下载是同一个文件

后端处理成功会显示一个下载的按钮，该按钮可以对处理后的文件进行下载

<template>
  <div class="upload-file">
    <!-- 拖拽上传区域 -->
    <el-upload
      ref="upload"
      action="#"
      multiple
      :http-request="httpRequest"
      accept=".docx"
      :file-list="fileList"
      :auto-upload="false"
      drag
      :before-upload="checkfiletype"
    >
      <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"
      >Upload</el-button
    >

    <el-button style="margin-left: 10px" type="success" v-show="isButton"
      >Download</el-button
    >
  </div>
</template>


export default {
  data() {
    return {
      fileList: [],
      isButton: false,
    };
  },
  methods: {
    httpRequest(file) {
      let that = this;
      let formData = new FormData();
      formData.append("file", file.file);
      request
        .post("upload", formData)
        .then((res) => {
          if (res.data.code == 200) {
            request.post("download", formData).then((res) => {
              if (res.data.code == 200) {
                that.isButton = true;
                console.log("download success");
              }
            });

            console.log("success");
            this.$message.success("success!");
          } else {
            this.$message.error("error!");
          }
        })
        .catch(() => {
          this.$message.error("error!");
        });
    },

    // 判断上传的文件类型
    checkfiletype(file) {
      var filename = file.name;
      var filetype = filename.substring(filename.lastIndexOf("."));
      var acceptType = [".docx"];
      if (acceptType.indexOf(filetype) == -1) {
        ElMessage.error("Please upload paper with .docx suffix");
        return false;
      }
    },
    // 删除之前钩子
    handleFileRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
  },
};

flask

class UploadResource(Resource):
    """上传文件"""
    def post(self):
        files = request.files.getlist('file')
        filenames = []
        error_filenames = []
        for file in files:
            if file and allowed_file(file.filename):
                filename = secure_filename(file.filename)
                file.save(os.path.join('uploads', filename))

            else:  # 文件后缀不符合类型
                error_filenames.append(file.filename)
        if error_filenames:  # 有文件上传失败的情况
            result = {
                'code': 200,
                'result': 'failure',
                'message': ",".join(error_filenames)
            }
            return result
        else:
            result = {
                'code': 200,
                'result': 'success',
                'message': ''
            }
            return result

文件可以正常的上传了，但是后续应该怎么做，需要具体的代码

参考链接

进度条就算了吧？有难度，建议弄个弹窗说正在处理，用ajax提交，后端处理完后，返回一个json格式，里面包含这个文件链接以及处理完成的信息，前端ajax接收成功后去掉弹窗，然后动态创建一个按钮和这个链接绑定在一起，一点击不就实现下载了！
反正真正的进度条前后端交互可能有难度吧，实在不行弄个假的呗，假的话也没必要，还不如弄个图标，放在弹窗里面让它转，或者一个进度条往前加载图标。成功之后关掉弹窗就行…，我猜这个问题拦住你的，肯定是你想要一个真正的进度条😂

1. 前端调用upload接口，后端接口文件成功，返回一个UUID，并把UUID和要处理的文件关联上
2. 后端处理文件，处理完文件将UUID标识处理完毕，并关联处理后的文件
3. 前端使用一个新接口不断使用UUID轮询，如果成功返回下载文件的接口
4. 点击按钮跳转下载文件的接口

提供参考链接【基于 Flask + Vue 实现前端文件上传及下载】，期望对你有所帮助：https://blog.csdn.net/weixin_42902669/article/details/118856457
【推荐理由：步骤讲解详细，注解清晰，代码细化区分前端、后端，对你编辑完善程序有所帮助】

这个看看
https://b23.tv/8fx3LYi

如果没人会的话我来试试