如何使用附加字段react.js flask上传多个文件

import React, { useState } from 'react';

const UploadForm = () => {
  const [files, setFiles] = useState([]);
  const [additionalData, setAdditionalData] = useState('');

  const handleFileChange = (event) => {
    setFiles(event.target.files);
  };

  const handleAdditionalDataChange = (event) => {
    setAdditionalData(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

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

    for (let i = 0; i < files.length; i++) {
      formData.append('files', files[i]);
    }

    // 使用Fetch或Axios等工具将formData发送到后端Flask服务器
    // 进行文件上传和附加字段的处理
    // ...
  };

  return (
    <form onSubmit={handleSubmit} encType="multipart/form-data">
      <div>
        <label htmlFor="additionalData">Additional Data:</label>
        <input type="text" id="additionalData" value={additionalData} onChange={handleAdditionalDataChange} />
      </div>
      <div>
        <label htmlFor="files">Files:</label>
        <input type="file" id="files" multiple onChange={handleFileChange} />
      </div>
      <button type="submit">Upload</button>
    </form>
  );
};

export default UploadForm;

from flask import Flask, request

app = Flask(__name__)

@app.route('/upload', methods=['POST'])
def upload():
    additionalData = request.form['additionalData']

    # 处理附加字段的数据
    # ...

    files = request.files.getlist('files')

    # 处理文件上传
    # ...

    return 'Upload successful!'

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