前后端交互的简单实现（python+html5+axios）

一个简单的HTML页面，通过axios将选定的音频文件上传至后端的Python服务器，后端Python服务器使用flask接收音频文件并返回上传成功的消息。请确保在本地运行flask服务器，并根据实际情况更改端口号和上传地址。

一直在学习的小白~

1602人浏览 · 2023-05-08 16:33:31

一直在学习的小白~ · 2023-05-08 16:33:31 发布

1、前端html+axios

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>音频上传</title>
</head>
<body>
  <form>
    <!-- 这里规定上传的类型 application/msword是word文本-->
    <input type="file" id="audio-file" accept="audio/*">
    <button type="button" onclick="uploadAudio()">上传</button>
  </form>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    function uploadAudio() {
      const fileInput = document.querySelector('#audio-file');
      const file = fileInput.files[0];
      if (!file) {
        console.error('请选择一个音频文件');
        return;
      }

      const formData = new FormData();
      formData.append('audio', file);

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

2、后端python

这段代码是一个 Flask 应用，当接收到一个 POST 请求时，从请求中获取音频文件，保存到服务器上指定的路径，并返回一个上传成功的消息。其中 response.headers['Access-Control-Allow-Origin'] = '*' 这一行设置了允许跨域访问。如果没有这一行，则前端在上传文件时会遇到跨域问题，因为默认情况下，Flask 只允许在本域名下进行请求，如果要跨域请求，则需要进行设置。

from flask import Flask, request, jsonify
import os
app = Flask(__name__)
# 指定可以访问的目录
app.config['UPLOAD_FOLDER'] = os.path.abspath(os.path.dirname(__file__))

@app.route('/uplode', methods=['POST'])
def upload_audio():
    file = request.files.get('audio')
    if not file:
        return jsonify({'message': '请选择一个音频文件'}), 400

    # 保存音频文件到服务器上的某个路径
    file.save(os.path.join(app.config['UPLOAD_FOLDER'], file.filename))
    response = jsonify({'message': '上传成功'})
    response.headers['Access-Control-Allow-Origin'] = '*'
    return response, 200

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