这里记录一些日常工作中对文件的一些处理(转base64,blob,替换base64头部)
获取file :
// 在vue中的使用 通过selectFile事件获选中的文件
<input type="file" accept="image/*" multiple="multiple" @change="selectFile($event)" class="inputStyle" />
async selectFile(el) {
let filesObj = el.target.files;
console.log('filesObj:', filesObj);
let fileList = Object.values(filesObj); // 将对象转化为数组
}
获取到的File格式如下:
1,将获取的file类型转为 base64格式
/**
* 将file文件转化为base64 使用promise
* @param file 该文件的file类型
*/
export function fileTransferBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader(); //异步读取
reader.readAsDataURL(file);
// 成功和失败返回对应的信息,reader.result一个base64,可以直接使用
reader.onload = (e) => {
resolve(e.target.result);
};
// 失败返回失败的信息
reader.onerror = (error) => {
console.warn('file文件转化为base64s失败:', error);
reject(error);
};
});
}
2,将base64格式的数据转为Blob
/**
* 将以base64的图片url数据转换为Blob 并进行上传
* @param urlData 用url方式表示的base64图片数据
*/
export function convertBase64UrlToBlob(urlData, filename) {
if (urlData == '' || !urlData) {
return console.warn('base64的图片不存在');
}
// 以base64的图片url数据转换为Blob
var arr = urlData.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
let bold = new Blob([u8arr], { type: mime });
return bold;
}
3,直接将File类型转为Blob
/**
* 将file数据转换为Blob
* @param file格式
*/
export function fileToBlob(file) {
return new Promise((resolve, reject) => {
// FileReader 异步读取文件
const reader = new FileReader();
// readAsDataURL: dataurl它的本质就是图片的二进制数据, 进行base64加密后形成的一个字符串,
reader.readAsDataURL(file);
// 成功和失败返回对应的信息,reader.result一个base64,可以直接使用
reader.onload = (e) => {
let arr = e.target.result.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
const blob = new Blob([e.target.result], { type: mime });
resolve(blob);
};
// 失败返回失败的信息
reader.onerror = (error) => {
console.warn('file数据转换为Blob失败:', error);
reject(error);
};
});
}
4,获取文件(图片视频等)的本地内存地址进行 回显
获取的是blob开头的一个本地内存的访问链接;可以直接用img,video的src属性直接访问;
如下:
blob:http://localhost:8082/ba51f68a-e024-4b9f-af01-08f7c9914e13
/**
* 获取文件(图片视频等)的本地内存地址 可以直接访问
* @param file 该文件的文件流
*/
export function createObjectURLFun(file) {
let url = '';
if (window.createObjectURL != undefined) {
// basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
// mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
5,替换视频文件的base64头部
(针对mov(ios的录像视频格式)或avi,wmv的视频格式,这类的base64格式使用video的src属性不能直接进行播放;所以要统一替换为mp4格式才能进行正常播放;如果是正常的mp4格式不进行任何处理)
/*
*对视频预览的处理 替换base64头部后缀 替换的视频文件名如下: mov: quicktime, avi:avi, wmv:x-ms-wmv, m2v:x-matroska等
* 参数是base64 返回值也是base64格式
*/
export function handleBase64Preview(base64Url) {
if (!base64Url) {
return false;
}
let needReplaceHeaderList = ['data:video/avi', 'data:video/quicktime', 'data:video/x-ms-wmv', 'data:video/x-matroska'];
let base64Header = base64Url.split(';')[0];
let newBase64Url = '';
if (needReplaceHeaderList.includes(base64Header)) {
newBase64Url = base64Url.replace(base64Header, 'data:video/mp4'); //替换成MP4
// newBase64Url = base64Url.replace(/^data:video\/\w+;base64,/, ''); //删除头部
return newBase64Url;
}
return base64Url;
}
6,判断是否是苹果设备
/**
* 判断是否是苹果设备 是返回true 否则返回false
* @param 无
*/
export function isIOS() {
let ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('android') != -1) {
return false;
}
if (ua.indexOf('iphone') != -1) {
return true;
}
}