Python基于React-Dropzone实现上传组件的示例代码

下面是详细讲解“Python基于React-Dropzone实现上传组件的示例代码”的完整攻略：

一、什么是 React-Dropzone?

React-Dropzone 是一个基于 React 的文件上传库，它提供了一个易于使用的上传组件，支持拖放和浏览选择操作。

二、安装 React-Dropzone

使用 npm 命令安装 React-Dropzone：

npm install react-dropzone

三、编写上传组件示例代码

以 Python Flask 框架为例，编写上传组件的示例代码。在前端页面，引入 React 和 React-Dropzone 库，编写上传组件组件代码：

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';

function UploadComponent() {
  const onDrop = useCallback((acceptedFiles) => {
    // 上传文件的逻辑处理
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {
        isDragActive ?
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  );
}

export default UploadComponent;

在服务器端，使用 Python Flask 框架编写 API，服务器端代码如下：

from flask import Flask, request, jsonify
from werkzeug.utils import secure_filename

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'uploads/'
app.config['ALLOWED_EXTENSIONS'] = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'}

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        return jsonify({'success': True}), 200
    else:
        return jsonify({'success': False}), 400

四、示例说明

示例一：上传单个文件

在前端上传组件中只能上传一个文件，在服务器端会自动保存上传的文件，支持上传的文件类型为 txt、pdf、png、jpg、jpeg、gif。

示例二：上传多个文件

只需要在前端上传组件中将 multiple 属性设置为 true，即可上传多个文件，服务器端上传处理逻辑需要做相应的修改。

<input {...getInputProps({ multiple: true })} />

...
files = request.files.getlist('file')
for file in files:
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
...