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

目录
  • 实例演示
    • 1. axios上传普通文件:
    • 2. 大文件导入:
  • 结语

这次我要讲述的是在React-Flask框架上开发上传组件的技巧。我目前主要以React开发前端,在这个过程中认识到了许多有趣的前端UI框架——React-BootstrapAnt DesignMaterial UIBulma等。而比较流行的上传组件也不少,而目前用户比较多的是jQuery-File-UploadDropzone,而成长速度快的新晋有Uppyfilepond。比较惋惜的是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 < 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>拖动文件或点击选择文件😊</p>
        </div>

        <div className="demo-infinite-container">
            <InfiniteScroll
                initialLoad={false}
                pageStart={0}
                loadMore={handleInfiniteOnLoad}
                hasMore={!loading && hasMore}
                useWindow= {false}
            >
                <List
                    dataSource={files}
                    renderItem={item=> (
                        <List.Item
                            actions={[
                                // <a key="list-loadmore-edit">编辑</a>,
                                <a key="list-loadmore-delete" onClick={removeFile}>删除</a>
                            ]}
                            // extra={

                            // }
                            key={item.path}>
                            <List.Item.Meta
                                avatar={
                                    <>
                                    {
                                        !!item.type && ['image/gif', 'image/jpeg', 'image/png'].includes(item.type) &&
                                        <img
                                            width={100}
                                            alt='logo'
                                            src={item.preview}
                                        />
                                    }
                                    </>
                                }
                                title={item.path}
                                description={formatBytes(item.size)}
                            />
                        </List.Item>
                    )}
                >
                    {loading && hasMore && (
                        <div className="demo-loading-container">
                            <Spin />
                        </div>
                    )}
                </List>
            </InfiniteScroll>
        </div>
        </section>
    );
}

flask代码:

def multiplefiles():
if 'files' not in request.files:
    return jsonify({'message': '没有文件!'}), 200
files = request.files.getlist('files')

for file in files:
    if file:
        # 通过拼音解决secure_filename中文问题
        filename = secure_filename(''.join(lazy_pinyin(file.filename))
        Path(UPLOAD_FOLDER + '/' + file_info['dir_path']).mkdir(parents=True, exist_ok=True)
        file.save(os.path.join(UPLOAD_FOLDER + '/' + file_info['dir_path'], filename))

return jsonify({'message': '保存成功!!'})

2. 大文件导入:

通过file.slice()方法生成文件的chunks。不要用Promise.all容易产生非顺序型的请求,导致文件损坏。

js代码:

const promiseArray = largeFiles.map(file => new Promise((resolve, reject) => {

    const chunkSize = CHUNK_SIZE;
    const chunks = Math.ceil(file.size / chunkSize);
    let chunk = 0;
    let chunkArray = new Array();
    while (chunk <= chunks) {
        let offset = chunk * chunkSize;
        let slice = file.slice(offset, offset+chunkSize)
        chunkArray.push([slice, offset])
        ++chunk;
    }
    const chunkUploadPromises = (slice, offset) => {
        const largeFileData = new FormData();
        largeFileData.append('largeFileData', slice)
        return new Promise((resolve, reject) => {
            axios({
                method: 'POST',
                url: '/api/files/largefile',
                data: largeFileData,
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            })
            .then(resp => {
                console.log(resp);
                resolve(resp);
            })
            .catch(err => {
                reject(err);
            })
        })
    };

    chunkArray.reduce( (previousPromise, [nextChunk, nextOffset]) => {
        return previousPromise.then(() => {
            return chunkUploadPromises(nextChunk, nextOffset);
        });
    }, Promise.resolve());
    resolve();
}))

flask代码:

filename = secure_filename(''.join(lazy_pinyin(filename)))
Path(UPLOAD_FOLDER + '/' + file_info['dir_path']).mkdir(parents=True, exist_ok=True)
save_path = os.path.join(UPLOAD_FOLDER + '/' + file_info['dir_path'], filename)
# rm file if exists
if offset == 0 and save_path.exists(filename):
    os.remove(filename)
try:
    with open(save_path, 'ab') as f:
        f.seek(offset)
        f.write(file.stream.read())
        print("time: "+ str(datetime.now())+" offset: " + str(offset))
except  OSError:
    return jsonify({'Could not write to file'}), 500

结语

文件传输一直都是HTTP的痛点,尤其是大文件传输。最好的方式是自己做个Client,通过FTP和FTPS的协议进行传输。第二种来自于大厂很中心化的方法,通过文件的checksum来确定文件是否已经上传了,来营造秒传的效果。第三种来自去中心化的Bittorrent的方法每一个用户做文件种子,提供文件传输的辅助,目前国内并没有普及使用。

到此这篇关于Python基于React-Dropzone实现上传组件的示例代码的文章就介绍到这了,更多相关Python React-Dropzone上传组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Python基于FTP模块实现ftp文件上传操作示例

    本文实例讲述了Python基于FTP模块实现ftp文件上传操作.分享给大家供大家参考,具体如下: #!/usr/bin/python #-*- coding:utf-8 -*- from ftplib import FTP #加载ftp模块 ftp=FTP() #设置变量 ftp.set_debuglevel(2) #打开调试级别2,显示详细信息 ftp.connect("IP","port") #连接的ftp sever和端口 ftp.login("us

  • 用Python实现一个简单的能够上传下载的HTTP服务器

    #!/usr/bin/env python #coding=utf-8 # modifyDate: 20120808 ~ 20120810 # 原作者为:bones7456, http://li2z.cn/ # 修改者为:decli@qq.com # v1.2,changeLog: # +: 文件日期/时间/颜色显示.多线程支持.主页跳转 # -: 解决不同浏览器下上传文件名乱码问题:仅IE,其它浏览器暂时没处理. # -: 一些路径显示的bug,主要是 cgi.escape() 转义问题 #

  • python3 flask实现文件上传功能

    本文实例为大家分享了python3-flask文件上传操作的具体代码,供大家参考,具体内容如下 # -*- coding: utf-8 -*- import os import uuid import platform from flask import Flask,request,redirect,url_for from werkzeug.utils import secure_filename if platform.system() == "Windows": slash =

  • python实现上传下载文件功能

    最近刚学python,遇到上传下载文件功能需求,记录下! django web项目,前端上传控件用的是uploadify. 文件上传 - 后台view 的 Python代码如下: @csrf_exempt @require_http_methods(["POST"]) def uploadFiles(request): try: user = request.session.get('user') allFimeNames = "" #获取所有上传文件 files

  • python 实现上传图片并预览的3种方法(推荐)

    在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 test.html <!DOCTYPE html>

  • Python selenium文件上传方法汇总

    文件上传是所有UI自动化测试都要面对的一个头疼问题,今天博主在这里给大家分享下自己处理文件上传的经验,希望能够帮助到广大被文件上传坑住的seleniumer. 首先,我们要区分出上传按钮的种类,大体上可以分为两种,一种是input框,另外一种就比较复杂,通过js.flash等实现,标签非input 我们分别对这两种进行分析: 1.input标签 众所周知,input标签是可以直接send_keys的,这里也不例外,来看代码示例: 示例网址:http://www.sahitest.com/demo

  • python实现的简单FTP上传下载文件实例

    本文实例讲述了python实现的简单FTP上传下载文件的方法.分享给大家供大家参考.具体如下: python本身自带一个FTP模块,可以实现上传下载的函数功能. #!/usr/bin/env python # -*- coding: utf-8 -*- from ftplib import FTP def ftp_up(filename = "20120904.rar"): ftp=FTP() ftp.set_debuglevel(2) #打开调试级别2,显示详细信息;0为关闭调试信息

  • Python+django实现文件上传

    1.文件上传(input标签) (1)html代码(form表单用post方法提交) <input class="btn btn-primary col-md-1" style="margin:0px 15px 25px 15px;" id="submitForm" type="button" value="提交" /> <form id="picture_form"

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

    目录 实例演示 1. axios上传普通文件: 2. 大文件导入: 结语 这次我要讲述的是在React-Flask框架上开发上传组件的技巧.我目前主要以React开发前端,在这个过程中认识到了许多有趣的前端UI框架--React-Bootstrap.Ant Design.Material UI.Bulma等.而比较流行的上传组件也不少,而目前用户比较多的是jQuery-File-Upload和Dropzone,而成长速度快的新晋有Uppy和filepond.比较惋惜的是Fine-Uploader

  • AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页

    1.引言 2.实现代码 2.1.服务器端代码 2.1.1. 文件上传状态类(FileUploadStatus) 2.1.2. 文件上传状态侦听类(FileUploadListener) 2.1.3. 后台服务类(BackGroundService) 2.1.4. 文件上传状态控制类(BeanControler) 2.2. 客户端代码 2.2.1. AjaxWrapper.js 2.2.2. fileUpload.html 2.2.3. result.jsp 2.2.4. fileUpload.c

  • 在vue项目中使用element-ui的Upload上传组件的示例

    本文介绍了vue项目中使用element-ui的Upload上传组件的示例,分享给大家,具体如下: <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onError="uploadError" :onSuccess="uploadSuccess&quo

  • js自己实现一个大文件切片上传+断点续传的示例代码

    目录 首先我们来分析一下需求 一. 格式校验 二. 文件切片 三. 断点续传 + 秒传 + 上传进度 PM:喂,那个切图仔,我这里有个100G的视频要上传,你帮我做一个上传后台,下班前给我哦,辛苦了.我:...相信每个切图工程师,都接触过文件上传的需求,一般的小文件,我们直接使用 input file,然后构造一个 new FormData()对象,扔给后端就可以了.如果使用了 Ant design 或者 element ui 之类的ui库,那更简单,直接调用一下api即可.当然了,复杂一些的,

  • JavaScript使用Ajax上传文件的示例代码

    本文介绍了JavaScript使用Ajax上传文件的示例代码,分享给大家,具体如下: 实现文件的上传主要有两种方式: 使用form表单提交上传 html代码如下: <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file" name="file"/> <button id=&

  • vue el-upload上传文件的示例代码

    话不多说 直接上代码 <el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload" :file-list="fileList" :on-preview="handlePreview" :on-success="hand

  • Go Gin实现文件上传下载的示例代码

    Go Gin 实现文件的上传下载流读取 文件上传 router router.POST("/resources/common/upload", service.UploadResource) service type: POST data:{ "saveDir":"保存的路径", "fileName":"文件名称不带后缀" } // 上传文件 func UploadResource(c *gin.Conte

  • Spring Cloud Feign实现文件上传下载的示例代码

    目录 独立使用Feign 上传文件 下载文件 使用Spring Cloud Feign 上传文件 下载文件 总结 Feign框架对于文件上传消息体格式并没有做原生支持,需要集成模块feign-form来实现. 独立使用Feign 添加模块依赖: <!-- Feign框架核心 --> <dependency> <groupId>io.github.openfeign</groupId> <artifactId>feign-core</arti

  • Java实现文件分片上传接口的示例代码

    目录 java后端分片上传接口 前端分片 java后端分片上传接口 文件上传工具--FileUtil package com.youmejava.chun.util; import lombok.Data; import org.apache.tomcat.util.http.fileupload.FileUtils; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; imp

  • 基于Node的React图片上传组件实现实例代码

    写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循React 组件化的思想,我把图片上传做成了一个独立的组件(没有其他依赖),直接import即可. import React, { Component } from 'react' import Upload from '../../components/FormControls/Upload/' /

随机推荐