目錄
- 實(shí)例演示
- 1. axios上傳普通文件：
- 2. 大文件導(dǎo)入：
- 結(jié)語
這次我要講述的是在React-Flask框架上開發(fā)上傳組件的技巧。我目前主要以React開發(fā)前端，在這個過程中認(rèn)識到了許多有趣的前端UI框架——React-Bootstrap、Ant Design、Material UI、Bulma等。而比較流行的上傳組件也不少，而目前用戶比較多的是jQuery-File-Upload和Dropzone，而成長速度快的新晉有Uppy和filepond。比較惋惜的是Fine-Uploader的作者自2018年后就決定不再維護(hù)了，原因作為后來者的我就不多過問了，但請各位尊重每一位開源作者的勞動成果。
這里我選擇React-Dropzone,原因如下：
- 基于React開發(fā)，契合度高
- 網(wǎng)上推薦度高，連Material UI都用他開發(fā)上傳組件
- 主要以 Drag 和 Drop 為主，但是對于傳輸邏輯可以由開發(fā)者自行設(shè)計。例如嘗試用socket-io來傳輸file chunks。對于node全棧估計可行，但是我這里使用的是Flask，需要將Blob轉(zhuǎn)ArrayBuffer。但是如何將其在Python中讀寫，我就沒進(jìn)行下去了。
實(shí)例演示
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>拖動文件或點(diǎn)擊選擇文件😊/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. 大文件導(dǎo)入：
通過file.slice()方法生成文件的chunks。不要用Promise.all容易產(chǎn)生非順序型的請求，導(dǎo)致文件損壞。
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
結(jié)語
文件傳輸一直都是HTTP的痛點(diǎn)，尤其是大文件傳輸。最好的方式是自己做個Client，通過FTP和FTPS的協(xié)議進(jìn)行傳輸。第二種來自于大廠很中心化的方法，通過文件的checksum來確定文件是否已經(jīng)上傳了，來營造秒傳的效果。第三種來自去中心化的Bittorrent的方法每一個用戶做文件種子，提供文件傳輸?shù)妮o助，目前國內(nèi)并沒有普及使用。
到此這篇關(guān)于Python基于React-Dropzone實(shí)現(xiàn)上傳組件的示例代碼的文章就介紹到這了,更多相關(guān)Python React-Dropzone上傳組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:- python 實(shí)現(xiàn)上傳圖片并預(yù)覽的3種方法(推薦)
- 用Python實(shí)現(xiàn)一個簡單的能夠上傳下載的HTTP服務(wù)器
- python實(shí)現(xiàn)上傳下載文件功能
- Python selenium文件上傳方法匯總
- python實(shí)現(xiàn)的簡單FTP上傳下載文件實(shí)例
- Python+django實(shí)現(xiàn)文件上傳
- python3 flask實(shí)現(xiàn)文件上傳功能
- Python基于FTP模塊實(shí)現(xiàn)ftp文件上傳操作示例
