前端（vue3 + ant design）和 后端 python flask 实现文件上传

1.开发框架

前端采用vue3 + ant design 框架；后端采用flask框架搭建项目

项目创建这里就不多说了，直接来实现文件上传吧~

2.前端代码实现

上传文件所需的 upload 组件和 button 组件均已在 main.js 文件中全局引入，大家可以根据自己所需去引入组件， ant design 组件引入介绍官网地址： 使用组件

uploadFile.vue 文件中的代码如下：

<template>
  <div class="upload">
   <!-- 上传按钮，由于我上传的是ppt文件，所以accept属性的值是“.ppt”，可根据自己的需求自行设置-->
   <!-- a-upload 组件的属性可以自行查看ant design官网的详细说明-->
    <a-upload
    accept=".ppt"  
    :show-upload-list="false"
    :before-upload="beforeUploadPpt"
    >
      <a-button class="upload-button">
        上传PPT
      </a-button>
    </a-upload>
    <!-- 显示上传进度-->
    <a-progress :percent="filepercent" id="uploadpercent"/>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import { defineComponent, ref, reactive } from 'vue'
import axios from 'axios'

export default defineComponent({
  setup () {
    const filepercent = ref(0) //简单数据类型可响应式定义，复杂数据类型使用 reactive, ref 和 reactive 均需从vue 中引入
    const beforeUploadPpt = file => {
      const fd = new FormData()
      fd.append('file', file) //文件以formdata格式进行上传，除此以外还有json格式，键值对格式
      axios({
        method: 'post', //提交数据方式选择不限长度的post
        url: 'http://127.0.0.1:5000/uploadppt', //后端地址 url 
        data: fd, //提交数据
        headers: { 'Content-Type': 'multipart/form-data' }, //默认的请求头格式为json格式，而此处提交的数据是formdata，所以需要设置请求头
        //axios提供的上传处理进度事件
        onUploadProgress: function (progressEvent) {
        //检测上传进度是否可计算
          if (progressEvent.lengthComputable) {
            filepercent.value = (progressEvent.loaded / progressEvent.total * 100 | 0)
            if (filepercent.value !== 0) {
              document.getElementById('uploadpercent').style.display = 'block'
            }
          }
        }
      }).then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          message.success('上传成功!')
        } else {
          message.error('上传失败！')
        }
      })
      //upload 组件自动上传文件，beforeUpload在此之前执行， 返回false则会将原有的上传停止
      //在beforeUpload中我们已经实现文件上传，所以返回false
      return false
    }
    return {
      filepercent,
      beforeUploadPpt
    }
  }
})
</script>
   }
  })
</script>

.upload {
  margin: 10px auto;
  display: block;
  width: 800px;
}
.upload .upload-button{
  left: -300px;
  background-color: #5758BB;
  color: #fff;
  border-radius: 10px;
}
.upload #uploadpercent{
 /* 进度条在上传之前不可见 */
  display: none;
}

3.后端代码实现

import os
from flask import Flask,request
from flask_cors import CORS

# 创建Flask实例
app = Flask(__name__,static_folder='uploadimg')
# 全局API配置跨域
cors = CORS(app,origins = '*')
@app.route('/uploadppt', methods = ['POST'])
def uploadPpt():
    file = request.files.get('file')
    if file is None:  # 表示没有发送文件
        return {
            'message': "文件上传失败"
        }
    file_name = file.filename.replace(" ", "")
    print("获取上传文件的名称为[%s]\n" % file_name)
    #注意提前创建uploadppt文件夹哦~
    file.save(os.path.dirname(__file__) + '/uploadppt/' + file_name)  # 保存文件

    return {
        'code': 200,
        'messsge': "文件上传成功",
    }

if __name__ == '__main__':
    # 默认host为127.0.0.1，port为5000
    app.run(host='127.0.0.1', port=5000, debug=True)