React+Koa實現文件上傳的示例
更新時間：2021年04月06日 09:58:43 作者：孤雨隨風zz
這篇文章主要介紹了React+Koa實現文件上傳的示例，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下
背景
最近在寫畢設的時候，涉及到了一些文件上傳的功能，其中包括了普通文件上傳，大文件上傳，斷點續(xù)傳等等
服務端依賴
- koa(node.js框架)
- koa-router(Koa路由)
- koa-body(Koa body 解析中間件，可以用于解析post請求內容)
- koa-static-cache(Koa 靜態(tài)資源中間件，用于處理靜態(tài)資源請求)
- koa-bodyparser(解析 request.body 的內容)
后端配置跨域
app.use(async (ctx, next) => {
ctx.set('Access-Control-Allow-Origin', '*');
ctx.set(
'Access-Control-Allow-Headers',
'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild',
);
ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
if (ctx.method == 'OPTIONS') {
ctx.body = 200;
} else {
await next();
}
});
后端配置靜態(tài)資源訪問 使用 koa-static-cache
// 靜態(tài)資源處理
app.use(
KoaStaticCache('./pulbic', {
prefix: '/public',
dynamic: true,
gzip: true,
}),
);
后端配置requst body parse 使用 koa-bodyparser
const bodyParser = require('koa-bodyparser');
app.use(bodyParser());
前端依賴
- React
- Antd
- axios
正常文件上傳
后端
后端只需要使用 koa-body 配置好options，作為中間件，傳入router.post('url',middleware,callback)即可
后端代碼
// 上傳配置
const uploadOptions = {
// 支持文件格式
multipart: true,
formidable: {
// 上傳目錄 這邊直接上傳到public文件夾，方便訪問 文件夾后面要記得加/
uploadDir: path.join(__dirname, '../../pulbic/'),
// 保留文件擴展名
keepExtensions: true,
},
};
router.post('/upload', new KoaBody(uploadOptions), (ctx, next) => {
// 獲取上傳的文件
const file = ctx.request.files.file;
const fileName = file.path.split('/')[file.path.split('/').length-1];
ctx.body = {
code:0,
data:{
url:`public/${fileName}`
},
message:'success'
}
});
前端
我這里使用的是formData傳遞的方式，前端通過<input type='file'/> 來訪問文件選擇器，通過onChange事件 e.target.files[0] 即可獲取選擇的文件，而后創(chuàng)建FormData 對象將獲取的文件formData.append('file',targetFile)即可
前端代碼
const Upload = () => {
const [url, setUrl] = useState<string>('')
const handleClickUpload = () => {
const fileLoader = document.querySelector('#btnFile') as HTMLInputElement;
if (isNil(fileLoader)) {
return;
}
fileLoader.click();
}
const handleUpload = async (e: any) => {
//獲取上傳文件
const file = e.target.files[0];
const formData = new FormData()
formData.append('file', file);
// 上傳文件
const { data } = await uploadSmallFile(formData);
console.log(data.url);
setUrl(`${baseURL}${data.url}`);
}
return (
<div>
<input type="file" id="btnFile" onChange={handleUpload} style={{ display: 'none' }} />
<Button onClick={handleClickUpload}>上傳小文件</Button>
<img src={url} />
</div>
)
}
其他可選方法
- input+form 設置form的aciton為后端頁面，enctype="multipart/form-data"，type=‘post'
- 使用fileReader讀取文件數據進行上傳 兼容性不是特別好
大文件上傳
文件上傳的時候，可能會因為文件過大，導致請求超時，這時候就可以采取分片的方式,簡單來說就是將文件拆分為一個個小塊，傳給服務器，這些小塊標識了自己屬于哪一個文件的哪一個位置，在所有小塊傳遞完畢后，后端執(zhí)行merge 將這些文件合并了完整文件，完成整個傳輸過程
前端
- 獲取文件和前面一樣，不再贅述
- 設置默認分片大小，文件切片，每一片名字為 filename.index.ext，遞歸請求直到整個文件發(fā)送完請求合并
const handleUploadLarge = async (e: any) => {
//獲取上傳文件
const file = e.target.files[0];
// 對于文件分片
await uploadEveryChunk(file, 0);
}
const uploadEveryChunk = (
file: File,
index: number,
) => {
console.log(index);
const chunkSize = 512; // 分片寬度
// [ 文件名, 文件后綴 ]
const [fname, fext] = file.name.split('.');
// 獲取當前片的起始字節(jié)
const start = index * chunkSize;
if (start > file.size) {
// 當超出文件大小，停止遞歸上傳
return mergeLargeFile(file.name);
}
const blob = file.slice(start, start + chunkSize);
// 為每片進行命名
const blobName = `${fname}.${index}.${fext}`;
const blobFile = new File([blob], blobName);
const formData = new FormData();
formData.append('file', blobFile);
uploadLargeFile(formData).then((res) => {
// 遞歸分片上傳
uploadEveryChunk(file, ++index);
});
};
后端
后端需要提供兩個接口
上傳
將上傳的每一個分塊存儲到對應name 的文件夾，便于之后合并
const uploadStencilPreviewOptions = {
multipart: true,
formidable: {
uploadDir: path.resolve(__dirname, '../../temp/'), // 文件存放地址
keepExtensions: true,
maxFieldsSize: 2 * 1024 * 1024,
},
};
router.post('/upload_chunk', new KoaBody(uploadStencilPreviewOptions), async (ctx) => {
try {
const file = ctx.request.files.file;
// [ name, index, ext ] - 分割文件名
const fileNameArr = file.name.split('.');
const UPLOAD_DIR = path.resolve(__dirname, '../../temp');
// 存放切片的目錄
const chunkDir = `${UPLOAD_DIR}/${fileNameArr[0]}`;
if (!fse.existsSync(chunkDir)) {
// 沒有目錄就創(chuàng)建目錄
// 創(chuàng)建大文件的臨時目錄
await fse.mkdirs(chunkDir);
}
// 原文件名.index - 每個分片的具體地址和名字
const dPath = path.join(chunkDir, fileNameArr[1]);
// 將分片文件從 temp 中移動到本次上傳大文件的臨時目錄
await fse.move(file.path, dPath, { overwrite: true });
ctx.body = {
code: 0,
message: '文件上傳成功',
};
} catch (e) {
ctx.body = {
code: -1,
message: `文件上傳失敗:${e.toString()}`,
};
}
});
合并
根據前端傳來合并請求，攜帶的name去臨時緩存大文件分塊的文件夾找到屬于該name的文件夾，根據index順序讀取chunks后，合并文件fse.appendFileSync(path,data) (按順序追加寫即合并),然后刪除臨時存儲的文件夾釋放內存空間
router.post('/merge_chunk', async (ctx) => {
try {
const { fileName } = ctx.request.body;
const fname = fileName.split('.')[0];
const TEMP_DIR = path.resolve(__dirname, '../../temp');
const static_preview_url = '/public/previews';
const STORAGE_DIR = path.resolve(__dirname, `../..${static_preview_url}`);
const chunkDir = path.join(TEMP_DIR, fname);
const chunks = await fse.readdir(chunkDir);
chunks
.sort((a, b) => a - b)
.map((chunkPath) => {
// 合并文件
fse.appendFileSync(
path.join(STORAGE_DIR, fileName),
fse.readFileSync(`${chunkDir}/${chunkPath}`),
);
});
// 刪除臨時文件夾
fse.removeSync(chunkDir);
// 圖片訪問的url
const url = `http://${ctx.request.header.host}${static_preview_url}/${fileName}`;
ctx.body = {
code: 0,
data: { url },
message: 'success',
};
} catch (e) {
ctx.body = { code: -1, message: `合并失敗:${e.toString()}` };
}
});
斷點續(xù)傳
大文件在傳輸過程中，如果刷新頁面或者臨時的失敗導致傳輸失敗，又需要從頭傳輸對于用戶的體驗是很不好的。因此就需要在傳輸失敗的位置，做好標記，下一次直接在這里進行傳輸即可，我采取的是在localStorage讀寫的方式
const handleUploadLarge = async (e: any) => {
//獲取上傳文件
const file = e.target.files[0];
const record = JSON.parse(localStorage.getItem('uploadRecord') as any);
if (!isNil(record)) {
// 這里為了便于展示，先不考慮碰撞問題, 判斷文件是否是同一個可以使用hash文件的方式
// 對于大文件可以采用hash(一塊文件+文件size)的方式來判斷兩文件是否相同
if(record.name === file.name){
return await uploadEveryChunk(file, record.index);
}
}
// 對于文件分片
await uploadEveryChunk(file, 0);
}
const uploadEveryChunk = (
file: File,
index: number,
) => {
const chunkSize = 512; // 分片寬度
// [ 文件名, 文件后綴 ]
const [fname, fext] = file.name.split('.');
// 獲取當前片的起始字節(jié)
const start = index * chunkSize;
if (start > file.size) {
// 當超出文件大小，停止遞歸上傳
return mergeLargeFile(file.name).then(()=>{
// 合并成功以后刪除記錄
localStorage.removeItem('uploadRecord')
});
}
const blob = file.slice(start, start + chunkSize);
// 為每片進行命名
const blobName = `${fname}.${index}.${fext}`;
const blobFile = new File([blob], blobName);
const formData = new FormData();
formData.append('file', blobFile);
uploadLargeFile(formData).then((res) => {
// 傳輸成功每一塊的返回后記錄位置
localStorage.setItem('uploadRecord',JSON.stringify({
name:file.name,
index:index+1
}))
// 遞歸分片上傳
uploadEveryChunk(file, ++index);
});
};
文件相同判斷
通過計算文件MD5,hash等方式均可，當文件過大時，進行hash可能會花費較大的時間。 可取文件的一塊chunk與文件的大小進行hash,進行局部的采樣比對， 這里展示 通過 crypto-js庫進行計算md5，FileReader讀取文件的代碼
// 計算md5 看是否已經存在
const sign = tempFile.slice(0, 512);
const signFile = new File(
[sign, (tempFile.size as unknown) as BlobPart],
'',
);
const reader = new FileReader();
reader.onload = function (event) {
const binary = event?.target?.result;
const md5 = binary && CryptoJs.MD5(binary as string).toString();
const record = localStorage.getItem('upLoadMD5');
if (isNil(md5)) {
const file = blobToFile(blob, `${getRandomFileName()}.png`);
return uploadPreview(file, 0, md5);
}
const file = blobToFile(blob, `${md5}.png`);
if (isNil(record)) {
// 直接從頭傳 記錄這個md5
return uploadPreview(file, 0, md5);
}
const recordObj = JSON.parse(record);
if (recordObj.md5 == md5) {
// 從記錄位置開始傳
//斷點續(xù)傳
return uploadPreview(file, recordObj.index, md5);
}
return uploadPreview(file, 0, md5);
};
reader.readAsBinaryString(signFile);
總結
之前一直對于上傳文件沒有過太多的了解，通過畢設的這個功能，對于上傳文件的前后端代碼有了初步的認識，可能這些方法也只是其中的選項并不包括所有，希望未來的學習中能夠不斷的完善。
第一次在掘金寫博客，在參加實習以后，發(fā)現自己的知識體量的不足，希望能夠通過堅持寫博客的方式，來梳理自己的知識體系，記錄自己的學習歷程，也希望各位大神在發(fā)現問題時不吝賜教，thx
以上就是React+Koa實現文件上傳的示例的詳細內容，更多關于React+Koa實現文件上傳的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了React hooks組件通信,在開發(fā)中組件通信是React中的一個重要的知識點，本文通過實例代碼給大家講解react hooks中常用的父子、跨組件通信的方法，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了React實現二級聯動效果，樓梯效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要給大家介紹了關于利用React擼一個日程組件的相關資料,包括日常組件的實現思路、使用的技術、以及遇到的技術難點，并給提供了詳細的實例代碼,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了React 中 setState使用小結,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
useEffect是react?v16.8新引入的特性。我們可以把useEffect?hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個函數的組合2022-11-11
本文主要介紹了react?實現表格列表拖拽排序，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
解決React報錯Rendered more hooks than during
這篇文章主要為大家介紹了React報錯Rendered more hooks than during the previous render解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
Reducer是個純函數，即只要傳入相同的參數，每次都應返回相同的結果。不要把和處理數據無關的代碼放在Reducer里，讓Reducer保持純凈，只是單純地執(zhí)行計算，這篇文章主要介紹了Redux拆分reducer函數流程2022-09-09
本文主要介紹一種基于?React?Hooks?的狀態(tài)共享方案，介紹其實現，并總結一下使用感受，目的是在狀態(tài)管理方面提供多一種選擇方式。感興趣的小伙伴可以了解一下2021-12-12
捕獲異常是來定位你錯誤代碼的。本文主要介紹了 React如何捕獲異常，你知道多少種方法，ErrorBoundary，ErrorBoundary-try-catch等等。本文就來詳細的介紹一下2021-06-06