@ivujs/i-utils
Version:
前端模块化 JavaScript 工具库
324 lines (301 loc) • 8.52 kB
JavaScript
import { isEmpty } from '../validate/index.mjs';
/* 文件信息处理 */
/**
* 格式化文件大小自动转为 B，KB，MB，GB
* @param {Number} size 文件的大小，单位byte字节
* @returns {String} 返回格式化后的字符串
*/
function formatFileSize(size) {
if (isEmpty(size)) return "0B";
if (size < 1024) {
return size + "B";
} else if (size < 1024 * 1024) {
return (size / 1024).toFixed(2) + "KB";
} else if (size < 1024 * 1024 * 1024) {
return (size / (1024 * 1024)).toFixed(2) + "MB";
} else {
return (size / (1024 * 1024 * 1024)).toFixed(2) + "GB";
}
}
/**
* 获得文件名称
* @param {String} fileName 文件的全名称，例如：测试图片.jpg
* @returns {String} 返回文件的名称
*/
function getFileName(fileName) {
if (isEmpty(fileName)) return;
return fileName.substring(0, fileName.lastIndexOf("."));
}
/**
* 获得文件后缀名
* @param {String} value 文件地址路径或者文件全名称，例如：http://xxx.com/mytest.jpg，测试图片.jpg
* @returns {String} 返回文件后缀名
*/
function getFileSuffix(value) {
if (isEmpty(value)) return;
return value.substring(value.lastIndexOf(".") + 1).toLowerCase();
}
/* 文件转换 */
/**
* file转blob
* @param {File} file file文件
* @returns {Promise} 返回Promise的blob
*/
function fileToBlob(file) {
return new Promise((resolve, reject) => {
// 读取解析文件
let reader = new FileReader();
reader.readAsArrayBuffer(file);
// 加载成功
reader.onload = (e) => {
const blob = new Blob([e.target.result], { type: file.type });
resolve(blob);
};
// 加载失败
reader.onerror = function (err) {
console.error(err);
reject(err);
};
});
}
/**
* file转base64
* @param {File} file file文件
* @returns {Promise} 返回Promise的base64
*/
function fileToBase64(file) {
return new Promise((resolve, reject) => {
// 读取解析文件
let reader = new FileReader();
reader.readAsDataURL(file);
// 加载成功
reader.onload = function (e) {
resolve(e.target.result);
};
// 加载失败
reader.onerror = function (err) {
console.error(err);
reject(err);
};
});
}
/**
* file转url
* @description 适用于本地上传图片并预览，需要注意 URL.revokeObjectURL(file) 内存释放
* @param {File} file file文件
* @returns {Promise} 返回Promise的url
*/
function fileToUrl(file) {
return new Promise((resolve, reject) => {
try {
resolve(URL.createObjectURL(file));
} catch (err) {
// 捕捉异常
console.error(err);
URL.revokeObjectURL(file);
reject(err);
}
});
}
/**
* url赚file
* @param {String} url url地址
* @returns {Promise} 返回Promise的file
*/
function urlToFile(url) {
return new Promise(async (resolve, reject) => {
try {
let res = await window.fetch(url);
if (res.status === 200) {
let blob = await res.blob();
let file = await blobToFile(blob);
resolve(file);
}
} catch (err) {
console.error(err);
reject(err);
}
});
}
/**
* blob转file
* @param {Blob} blob blob数据
* @param {String} fileName 文件名称，默认以时间戳命名
* @returns {Promise} 返回Promise的file
*/
function blobToFile(blob, fileName = Date.now()) {
return new Promise((resolve, reject) => {
try {
const mime = blob.type;
const size = blob.size;
const fileSuffix = mime.split("/")[1];
const file = new File([blob], `${Date.now()}.${fileSuffix}`, {
type: mime,
size: size,
name: `${fileName}.${fileSuffix}`,
lastModified: Date.now(),
lastModifiedDate: new Date(),
});
resolve(file);
} catch (err) {
// 捕捉异常
console.error(err);
reject(err);
}
});
}
/**
* blob转文本
* @param {Blob} blob blob数据
* @returns {Promise} 返回Promise的文本
*/
function blobToText(blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = function (event) {
resolve(event.target.result);
};
reader.onerror = function (error) {
reject(error);
};
reader.readAsText(blob);
});
}
/**
* blob转base64
* @param {Blob} blob blob数据
* @returns {Promise} 返回Promise的base64
*/
function blobToBase64(blob) {
return new Promise((resolve, reject) => {
// 读取解析文件
let reader = new FileReader();
reader.readAsDataURL(blob);
// 加载成功
reader.onload = function (e) {
resolve(e.target.result);
};
// 加载失败
reader.onerror = function (err) {
console.error(err);
reject(err);
};
});
}
/**
* base64转file
* @param {String} base64 base64数据
* @param {String} fileName 文件名称，默认以时间戳命名
* @returns {Promise} 返回Promise的file
*/
function base64ToFile(base64, fileName = Date.now()) {
return new Promise((resolve, reject) => {
try {
const arr = base64.split(",");
const mime = arr[0].match(/:(.*?);/)[1];
const fileSuffix = mime.split("/")[1];
const bstr = window.atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
resolve(new File([u8arr], `${fileName}.${fileSuffix}`, { type: mime }));
} catch (err) {
// 捕捉异常
console.error(err);
reject(err);
}
});
}
/**
* base64转成blob
* @param {String} base64 base64数据
* @returns {Promise} 返回Promise的blob
*/
function base64ToBlob(base64) {
return new Promise((resolve, reject) => {
try {
const arr = base64.split(",");
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = window.atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
resolve(new Blob([u8arr], { type: mime }));
} catch (err) {
// 捕捉异常
console.error(err);
reject(err);
}
});
}
/**
* 图片url转base64
* @param {String} imgUrl 图片url地址
* @returns {Promise} 返回Promise的base64
*/
function urlToBase64(imgUrl) {
return new Promise((resolve, reject) => {
// 设置图片
const img = new Image();
img.src = imgUrl;
// 加载成功
img.onload = function () {
// 画图
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0, img.width, img.height);
// 转为base64
const base64 = canvas.toDataURL("image/png");
resolve(base64);
};
// 加载失败
img.onerror = function (err) {
console.error(err);
reject(err);
};
});
}
/* 下载文件 */
/**
* 下载blob格式的文件
* @param {Blob} blob blob数据
* @param {String} fileName 下载的文件名，不写后缀名则默认为原文件类型
*/
function downloadBlobFile(blob, fileName) {
try {
const objUrl = window.URL.createObjectURL(blob);
const link = window.document.createElement("a");
link.download = fileName;
link.href = objUrl;
link.click();
URL.revokeObjectURL(objUrl);
} catch (error) {
console.error(error);
}
}
/**
* 通过文件url地址下载
* @param {String} fileUrl url文件地址
* @param {String} fileName 下载的文件名，不写后缀名则默认为原文件类型
*/
function downloadFileUrl(fileUrl, fileName) {
try {
const link = window.document.createElement("a");
link.download = fileName;
link.href = fileUrl;
// 生成节点点击
window.document.body.appendChild(link);
link.click();
// 点击后移除节点
window.document.body.removeChild(link);
} catch (error) {
console.error(error);
}
}
export { base64ToBlob, base64ToFile, blobToBase64, blobToFile, blobToText, downloadBlobFile, downloadFileUrl, fileToBase64, fileToBlob, fileToUrl, formatFileSize, getFileName, getFileSuffix, urlToBase64, urlToFile };