目的

• 解決富文本編輯器中復(fù)制粘貼的圖片 base64 字符串過長導(dǎo)致無法存儲到數(shù)據(jù)庫的問題

思路

• 通過正則 獲取html字符串中里面的所有圖片 base64 數(shù)組 然后每個圖片base64 轉(zhuǎn)成file
• 使用上傳文件的函數(shù) 上傳到服務(wù)器上.
• 將上傳后獲取到的圖片訪問url 替換成 數(shù)據(jù)里面的 img 的 src.

代碼

/**
 * 將html中的 圖片base64 通過調(diào)上傳文件接口轉(zhuǎn)換成圖片url
 * */

/**
上傳文件
**/
export function uploadFile(params) {
	let url = `/upload`; // 
	const formData = new FormData();
	for (let item in params) {
		formData.append(item, params[item]);
	}
	return fetch(url, {
		method: 'POST',
		headers: {
			Accept: '*/*',
		},
		body: formData,
	})
		.then((res) => {
			return res.json();
		})
		.then((responseData) => {
			if(responseData && typeof responseData === 'object' && responseData.url){
				return responseData;
			}
			if (responseData && responseData.data) {
				return responseData.data;
			} else {
				throw new Error('文件上傳失敗');
			}
		})
		.catch(() => {
			throw new Error('上傳文件失敗');
		});
}

// base64轉(zhuǎn)url
export default function base64ImgToUrl(htmlContent = ''){
	return new Promise((resolve, reject) => {
		let splitContent = getImages(htmlContent);  // 獲取所有的圖片 的 base64 src
		let res = [];
		for(let item of splitContent){
			if(item && item.includes(';base64,')){
				const file = {
					base64: item,
				};
				file.file = base64toFile(item, new Date().getTime()); // 將圖片轉(zhuǎn)換成file
				res.push(file);
			}
		} // 任務(wù)列表

		async function DoTaskByForOf() {
			for (let item of res) { // 按順序執(zhí)行
					const fileResponse = await uploadFile({file:item.file}); // 上傳文件到服務(wù)器
					if(fileResponse && fileResponse.url){
						item.url = fileResponse.url;
					}
			}
			return res;
		}
		DoTaskByForOf().then((r) => {
			resolve(r);
		}); // 按順序執(zhí)行
	})
}

/**
 * 使用正則表達(dá)式從HTML字符串中獲取所有圖像src
 * */
export function getImages(html) {
	const regExp = /<img[^>]+src=['"]([^'"]+)['"]+/g;
	const result = [];
	let temp;
	while ((temp = regExp.exec(html)) != null) {
		result.push(temp[1]);
	}
	return result;
}


/**
 * 把base64圖片轉(zhuǎn)為文件對象
 * 第一個參數(shù)dataUrl是一個base64的字符串。第二個參數(shù)是文件名可以隨意命名
 */
export function base64toFile(dataUrl = '', filename = 'file') {
	let arr = dataUrl.split(',');
	let mime = arr[0].match(/:(.*?);/)[1];
	// suffix是該文件的后綴
	let suffix = mime.split('/')[1];
	// atob 對經(jīng)過 base-64 編碼的字符串進(jìn)行解碼
	let bstr = atob(arr[1]);
	// n 是解碼后的長度
	let n = bstr.length;
	// Uint8Array 數(shù)組類型表示一個 8 位無符號整型數(shù)組 初始值都是 數(shù)子0
	let u8arr = new Uint8Array(n);
	// charCodeAt() 方法可返回指定位置的字符的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數(shù)
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	// new File返回File對象 第一個參數(shù)是 ArraryBuffer 或 Bolb 或Arrary 第二個參數(shù)是文件名
	// 第三個參數(shù)是 要放到文件中的內(nèi)容的 MIME 類型
	return new File([u8arr], `${filename}.${suffix}`, {
		type: mime,
	});
}

文章來源地址http://www.zghlxwxcb.cn/news/detail-817856.html

到了這里，關(guān)于將html字符串中的base64圖片轉(zhuǎn)換成file并上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！