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

附加字段（Additional Fields）是在文件上传过程中，除了文件本身之外，还可以携带一些额外的信息。在使用React.js和Flask进行多文件上传时，可以通过以下步骤来使用附加字段：

前端使用React.js创建一个文件上传表单，并设置enctype属性为multipart/form-data，以支持文件上传。

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;

后端使用Flask接收文件和附加字段。在Flask中，可以使用request.files来获取上传的文件，使用request.form来获取附加字段的值。

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()

这样，前端通过React.js和Flask后端的配合，就可以实现上传多个文件，并携带附加字段的功能。

附加字段的使用场景：