基於React-Dropzone開發上傳元件功能(例項演示)
阿新 • • 發佈：2021-08-17
這次我要講述的是在React-Flask框架上開發上傳元件的技巧。我目前主要以React開發前端，在這個過程中認識到了許多有趣的前端UI框架——React-Bootstrap、Ant Design、Material UI、Bulma等。而比較流行的上傳元件也不少，而目前使用者比較多的是 -File-Upload和Dropzone，而成長速度快的新晉有Uppy和filepond。
這次我要講述的是在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。但是如何將其在中讀寫，我就沒進行下去了。
例項演示
1. axios上傳普通檔案：
通過yarn將react-dropzone和引入：
yarn add react-dropzone axios
前端如下(如有缺失，請自行修改)：
import React,{
useState,useCallback,useEffect,} from 'react';
import {useDropzone} from 'react-dropzone';
import "./dropzone.styles."
import InfiniteScroll from 'react-infinite-scroller';
import {
List,message,// Avatar,Spin,} from 'antd';
imporhttp://www.cppcns.comt 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">
&www.cppcns.com
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)
filpggmtuHe.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)
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的方法每一個使用者做檔案種子，提供檔案傳輸的輔助，目前國內並沒有普及使用。
到此這篇關於基於React-Dropzone開發上傳元件的http://www.cppcns.com文章就介紹到這了,更多相關React-Dropzone元件開發內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！