flask+axios前端上传文件后端接收

flask+axios进行前后端交互，前端进行文件上传，后端接收。后端创建了upload文件夹，与代码在同级目录上，现在前后端显示如下：

前端代码

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileUpload">
    <button @click="uploadFile">提交</button> 
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      file:null
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      console.log(file.size)
      if (file && (file.name.endsWith('.eqt')||file.name.endsWith('.EQT'))) {
        // 执行上传逻辑，例如发送文件到服务器
        console.log('上传文件:', file);
        // 可以在这里调用接口、使用Axios等进行文件上传的操作
      } else {
        this.$message.error("请上传EQT文件") ;
        console.error('请选择一个 .eqt 文件');
      }
    },
    uploadFile() {
  let formData = new FormData();
  formData.append('file', this.file);

  axios.post('http://localhost:5000/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
}
  }
};
</script>

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

app = Flask(__name__)
CORS(app)
app.config['MAX_CONTENT_LENGTH'] = 1024 * 1024 * 1024
@app.route('/upload', methods=['POST'])

def upload_file():
    if 'file' not in request.files:
        return 'No file part', 401

    file = request.files['file']
    if file.filename == '':
        print(file)
        return 'No selected file', 402

    filename = secure_filename(file.filename)
    app_root = os.path.dirname(os.path.abspath(__file__))
    upload_folder = os.path.join(app_root, 'upload')
    print(os.path.join(upload_folder, filename))
    file.save(os.path.join(upload_folder, filename))

    return 'File uploaded successfully'

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

这儿判断写错了，你这个不能用in ,in判断的是key，不是value

不知道你这个问题是否已经解决, 如果还没有解决的话:

这篇博客也许可以解决你的问题👉 ：Flask 接收axios post的数据
除此之外, 这篇博客: flask后端接收POST数据的三种格式探究中的 三、使用axios传递参数 部分也许能够解决你的问题。

以下回答由chatgpt基于相关博客总结生成:

优化问题的prompt:

你好！关于使用Flask和Axios进行前后端交互实现文件上传功能，以下是具体的解决方案：

首先，确保你的前端和后端代码可以正常运行，并且前端能够正常上传文件并发送至后端。你的代码中已经包含了一些必要的逻辑，但是还有一些地方可以进行优化。下面是我给出的具体解决方案：

在前端代码的handleFileUpload方法中，你可以先判断文件类型是否符合要求。现在你已经对文件的扩展名进行了判断，但可以通过文件的MIME类型进行更准确的判断。可以使用HTML5中的FileReader对象来读取文件，并获取其对应的MIME类型。以下是一个示例：

handleFileUpload(event) {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = () => {
    const arrayBuffer = reader.result;
    const byteArray = new Uint8Array(arrayBuffer);
    const fileType = this.getFileType(byteArray);

    if (fileType === 'application/octet-stream' || fileType === 'application/x-eqt') {
      // 执行上传逻辑
      // ...
      console.log('上传文件:', file);
    } else {
      this.$message.error("请上传EQT文件");
      console.error('请选择一个 .eqt 文件');
    }
  };

  reader.readAsArrayBuffer(file);
},

getFileType(byteArray) {
  const signature = byteArray.slice(0, 4).join();

  if (signature === '239,187,191') {
    return 'text/plain';  // UTF-8 with BOM
  } else if (signature === '208,207,17,224') {
    return 'application/x-eqt';  // EQT file signature
  } else {
    return 'application/octet-stream';
  }
}

在前端代码的uploadFile方法中，你已经使用了FormData来构建文件上传需要的数据。这部分代码可以保持不变。
在后端代码中，你已经使用了Flask来接收文件并保存到指定的文件夹中。这部分代码可以保持不变。
为了提高安全性，你可以在后端代码中添加一些额外的验证逻辑，例如对上传文件的类型、大小等进行校验。以下是一个示例：

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

app = Flask(__name__)
CORS(app)
app.config['MAX_CONTENT_LENGTH'] = 1024 * 1024 * 1024
ALLOWED_EXTENSIONS = {'eqt'}

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 'No file part', 401

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

    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        app_root = os.path.dirname(os.path.abspath(__file__))
        upload_folder = os.path.join(app_root, 'upload')
        file.save(os.path.join(upload_folder, filename))
        return 'File uploaded successfully'
    else:
        return 'Invalid file type', 403

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

在以上代码中，我添加了ALLOWED_EXTENSIONS集合，用于存储允许上传的文件类型的扩展名。并添加了allowed_file函数用于校验上传文件的扩展名是否合法。在upload_file方法中，我对上传的文件类型进行了额外的校验，如果文件类型不在允许的范围内，则返回Invalid file type。

这样，你就完成了使用Flask和Axios实现文件上传功能的优化。

希望这个解决方案对你有帮助！如果你有任何问题，可以随时问我。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^