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

Question

使用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

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

Answer 1

参考链接

vue + flask 实现上传文件下载_小杨&的博客-CSDN博客 根据公司需求，最近需要做一个文件下载功能，使用flask做后台服务，vue写前端测试。flask实现接收文件时先根据指定的人进行创建文件夹 if userid and file: userid_path = r'D:\bmd\bmd_server\src\company\flask_server\files\{}'.format(userid) ... https://blog.csdn.net/weixin_43841806/article/details/103781225?ops_request_misc=&request_id=&biz_id=102&utm_term=flask%20vue%20elementui%E8%BF%9B%E8%A1%8C%E6%96%87%E4%BB%B6%E7%9A%84%E4%B8%8A%E4%BC%A0%E5%92%8C%E4%B8%8B%E8%BD%BD&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-3-103781225.nonecase&spm=1018.2226.3001.4450