react將文件轉(zhuǎn)為base64上傳的示例代碼

更新時(shí)間：2023年09月06日 08:31:52 作者：ATWLee

本文主要介紹了react將文件轉(zhuǎn)為base64上傳的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

需求

將圖片、pdf、word、excel等文件進(jìn)行上傳。圖片、pdf等調(diào)接口A、word、excel等附件調(diào)接口B。接口關(guān)于文件是base64格式的參數(shù)

業(yè)務(wù)場(chǎng)景

上傳資源，區(qū)分影像與附件

邏輯思路

使用原生input標(biāo)簽，type='file'，進(jìn)行上傳
上傳后的回調(diào)，對(duì)文件進(jìn)行分類，影像與附件
對(duì)文件進(jìn)行base64編碼
執(zhí)行接口進(jìn)行上傳

代碼實(shí)現(xiàn)

點(diǎn)擊input進(jìn)行上傳，選擇文件后執(zhí)行onChange回調(diào)

<input
  type="file"
  multiple
  ref={uploadInputRef}
  onChange={uploadFileOnChange}
 />

對(duì)文件進(jìn)行分類，我這里是通過(guò)type去判斷的

export const uploadFileOnChange = async (e: ChangeEvent<HTMLInputElement>) => {
? const files = e.target.files;
? // 將影像以及附件分類
? const images: File[] = [];
? const attachments: File[] = [];
? for (const iterator of files ?? []) {
? ? if (
? ? ? iterator.type.includes('sheet') ||
? ? ? iterator.type.includes('excel') ||
? ? ? iterator.type.includes('csv') ||
? ? ? iterator.type.includes('word')
? ? ) {
? ? ? attachments.push(iterator);
? ? } else {
? ? ? images.push(iterator);
? ? }
? }
};

對(duì)文件進(jìn)行base64編碼

async function readFileAsDataURL(file: Blob) {
? const result_base64 = await new Promise<string>((resolve) => {
? ? const fileReader = new FileReader();
? ? fileReader.readAsDataURL(file);
? ? fileReader.onload = () =>
? ? ? typeof fileReader.result === 'string' && resolve(fileReader.result);
? });
? return result_base64.split('base64,')[1];
}
export const uploadFileOnChange = async (e: ChangeEvent<HTMLInputElement>) => {
? const files = e.target.files;
? // 將影像以及附件分類
? const images: File[] = [];
? const attachments: File[] = [];
? for (const iterator of files ?? []) {
? ? if (
? ? ? iterator.type.includes('sheet') ||
? ? ? iterator.type.includes('excel') ||
? ? ? iterator.type.includes('csv') ||
? ? ? iterator.type.includes('word')
? ? ) {
? ? ? attachments.push(iterator);
? ? } else {
? ? ? images.push(iterator);
? ? }
? }
? const imageData: ImageData[] = [];
? const affixData: AffixData[] = [];
? for (const i of images) {
? ? const imgBase64 = await readFileAsDataURL(i);
? ? imageData.push({
? ? ? name: i.name,
? ? ? imgBase64,
? ? });
? }
? for (const i of attachments) {
? ? const affixBase64 = await readFileAsDataURL(i);
? ? affixData.push({
? ? ? name: i.name,
? ? ? affixBase64,
? ? });
? }
? return {
? ? imageData,
? ? affixData,
? };
};

拿到上一步返回的數(shù)據(jù)調(diào)接口

到此這篇關(guān)于react將文件轉(zhuǎn)為base64上傳的示例代碼的文章就介紹到這了,更多相關(guān)react將文件轉(zhuǎn)為base64進(jìn)行上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: