vue+python实现前后端交互

Question

初学vue+python项目，目前对前后端交互这块不太懂。
目前前端UploadEQT.vue

 uploadFile() {
      // 创建FormData对象
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      
      // 发送表单数据到后端
      axios.post('http://localhost:8080/#/UploadEQT', formData)
        .then(response => {
          // 根据后端返回的结果做出相应处理
          console.log(response.data);
        })
        .catch(error => {
          // 处理错误情况
          console.error(error);
        });
    }

上传文件：

后端接收文件

from flask import Flask, request

app = Flask(__name__)


@app.route('/upload', methods=['POST'])
def upload_file():
    uploaded_file = request.files['file']
    if uploaded_file:
        # 执行你想要的操作，比如保存文件到本地
        uploaded_file.save(uploaded_file.filename)
        return '文件上传成功！'
    else:
        return '未接收到文件！'


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

后端文件结构

图中的eqt文件是我手动加进来的，目前不懂得是前端 axios.post()，和@app.route()怎么写

Answer 1

参考一下这个demo，这是之前我用gpt生成的：
下面是一个简单的 Vue 和 Flask 结合的文件上传示例的代码：

Vue 前端代码（App.vue）：

<template>
  <div>
    <input type="file" v-model="file" />
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    uploadFile() {
      let formData = new FormData();
      formData.append('file', this.file);

      axios.post('http://localhost:5000/upload', formData)
        .then(response => {
          // 处理响应结果
          console.log(response.data);
        })
        .catch(error => {
          // 处理错误
          console.error(error);
        });
    }
  }
};
</script>

Flask 后端代码（app.py）：

from flask import Flask, request
from flask_cors import CORS
from werkzeug.utils import secure_filename

app = Flask(__name__)
CORS(app)

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return 'No file part', 400

    file = request.files['file']
    if file.filename == '':
        return 'No selected file', 400

    filename = secure_filename(file.filename)
    filepath = 'your_upload_path/' + filename
    file.save(filepath)

    return 'File uploaded successfully'

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

请确保在 Vue 项目中安装了 axios 库：npm install axios。将前端代码保存为 App.vue，在 Vue 项目中使用即可。将后端代码保存为 app.py，在 Flask 项目中运行 app.py 即可。注意替换代码中的上传路径 your_upload_path 为您希望保存文件的实际路径。

这个示例使用了 Axios 库来发送 POST 请求，通过 FormData 对象将文件数据添加到请求中。后端使用 Flask 来创建一个接收文件上传的路由处理函数，并使用 Werkzeug 的 secure_filename 函数确保文件名的安全性。当文件上传成功时，返回上传成功的消息。

请根据您的具体需求调整代码，并确保正确安装了 Flask 和相关依赖库。运行 Vue 和 Flask 项目后，访问 Vue 前端页面即可进行文件上传测试。

运行过程中有啥问题，可以随时交流