VUE前端

<template>
  <div class="app-container">
    <h1>文件上传示例</h1>
    <input type="file" @change="handleFileUpload" />
    <button @click="submitFile">上传文件</button>
  </div>
</template>

<script>
import axios from "axios"; // 使用 Axios 发送 HTTP 请求

export default {
  data() {
    return {
      selectedFile: null, // 存储选中的文件
    };
  },
  methods: {
    // 处理文件选择
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    },
    // 提交文件
    async submitFile() {
      if (!this.selectedFile) {
        alert("请先选择一个文件！");
        return;
      }

      const formData = new FormData(); // 创建 FormData 对象
      formData.append("file", this.selectedFile);

      try {
        // 发送 POST 请求到 Flask 后端
        const response = await axios.post("/upload", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        });
        alert(`上传成功: ${response.data.message}`);
      } catch (error) {
        console.error("文件上传失败:", error);
        alert("文件上传失败，请检查控制台日志！");
      }
    },
  },
};
</script>

<style scoped>
/* 设置背景颜色为白色 */
.app-container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  margin: 50px auto;
  text-align: center;
}

/* 标题样式 */
h1 {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}

/* 按钮样式 */
button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

/* 文件选择器样式 */
input[type="file"] {
  margin-bottom: 20px;
}
</style>

Flask后端app.py代码如下：

from flask import Flask, request, jsonify
import os

app = Flask(__name__)


# 允许的文件扩展名
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'txt', 'pdf'}

# 检查文件扩展名是否有效
def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return jsonify({"error": "没有找到文件"}), 400

    file = request.files['file']

    if file.filename == '':
        return jsonify({"error": "文件名为空"}), 400

    if file and allowed_file(file.filename):
        # 保存文件
        file_path = os.path.join('./data/', file.filename)
        file.save(file_path)
        return jsonify({"message": f"文件 {file.filename} 上传成功！", "file_path": file_path}), 200
    else:
        return jsonify({"error": "不支持的文件格式"}), 400

if __name__ == '__main__':
    app.run(debug=True)

前端界面：

点击上传文件之后显示上传信息：

在后台设置的路径下查看到上传的文件：