这次我要讲述的是在React-Flask框架上开发上传组件的技巧。我目前主要以React开发前端,在这个过程中认识到了许多有趣的前端UI框架——React-Bootstrap、Ant Design、Material UI、Bulma等。而比较流行的上传组件也不少,而目前用户比较多的是 jQuery-File-Upload和Dropzone,而成长速度快的新晋有Uppy和filepond。比较惋惜的是Fine-Uploader的作者自2018年后就决定不再维护了,原因作为后来者的我就不多过问了,但请各位尊重每一位开源作者的劳动成果。
这里我选择React-Dropzone,原因如下:
Drag
和 Drop
为主,但是对于传输逻辑可以由开发者自行设计。例如尝试用socket-io来传输file chunks。对于node全栈估计可行,但是我这里使用的是Flask,需要将Blob转ArrayBuffer。但是如何将其在Python中读写,我就没进行下去了。通过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 < 0 ? 0 : decimals; const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; } /** * Dropzone 上传文件 * @param {*} props * @returns */ function DropzoneUpload(props) { const [files, setFiles] = useState([]) const [loading, setLoading] = useState(false); const [hasMore, setHasMore] = useState(true); const onDrop = useCallback(acceptedFiles => { 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 ( <section className="container"> <div {...getRootProps({className: 'dropzone'})}> <input {...getInputProps()} /> <p>拖动文件或点击选择文件