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

本文主要介绍了在React-Flask框架上开发上传组件的技巧。文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

这次我要讲述的是在React-Flask框架上开发上传组件的技巧。我目前主要以React开发前端，在这个过程中认识到了许多有趣的前端UI框架――React-Bootstrap、Ant Design、Material UI、Bulma等。而比较流行的上传组件也不少，而目前用户比较多的是jQuery-File-Upload和Dropzone，而成长速度快的新晋有Uppy和filepond。比较惋惜的是Fine-Uploader的作者自2018年后就决定不再维护了，原因作为后来者的我就不多过问了，但请各位尊重每一位开源作者的劳动成果。

这里我选择React-Dropzone,原因如下：

基于React开发，契合度高

网上推荐度高，连Material UI都用他开发上传组件

主要以 Drag 和 Drop 为主，但是对于传输逻辑可以由开发者自行设计。例如尝试用socket-io来传输file chunks。对于node全栈估计可行，但是我这里使用的是Flask，需要将Blob转ArrayBuffer。但是如何将其在Python中读写，我就没进行下去了。

实例演示

1. axios上传普通文件：

通过yarn将react-dropzone和引入：

yarn add react-dropzone axios

前端js如下(如有缺失，请自行修改)：

import React, { useState, useCallback, useEffect, } from 'react'; import {useDropzone} from 'react-dropzone'; import "./dropzone.styles.css" import InfiniteScroll from 'react-infinite-scroller'; import { List, message, // Avatar, Spin, } from 'antd'; import axios from 'axios'; /** * 计算文件大小 * @param {*} bytes * @param {*} decimals * @returns */ function formatBytes(bytes, decimals = 2) { if (bytes === 0) return '0 Bytes'; const k = 1024; const dm = decimals { setLoading(true); const formData = new FormData(); smallFiles.forEach(file => { formData.append("files", file); }); axios({ method: 'POST', url: '/api/files/multiplefiles', data: formData, headers: { "Content-Type": "multipart/form-data", } }) then(resp => { addFiles(acceptedFiles); setLoading(false); }); }, [files]); // Dropzone setting const { getRootProps, getInputProps } = useDropzone({ multiple:true, onDrop, }); // 删除附件 const removeFile = file => { const newFiles = [...files] newFiles.splice(newFiles.indexOf(file), 1) setFiles(newFiles) } useEffect(() => { // init uploader files setFiles([]) },[]) return ( 拖动文件或点击选择文件上一篇：pandas 将索引值相加的方法下一篇：Python迭代器模块itertools使用原理解析

热门搜索：

React-Dropzone

6行代码实现无组件上传（author:stimson）

Asp下实现多表单域无组件文件上传的实例

Python实例

的示例代码