大家好，关于blob对象和file对象有了解多少呢，它们都是一种文件的表示形式，文件之间是可以互相转换的，顺带一提，还有经常用到的临时文件路径tempFileURL。
文件类型
首先，需要先知道文件类型有哪些，我们可以通过文件名后缀判断
常见的文件类型列表
| 文件后缀 | MIME类型 | 说明 |
|---|---|---|
| txt | text/plain | 文本文件 |
| htm, html | text/html | HTML文本 |
| application/pdf | PDF文档 | |
| doc | application/msword | Word文档 |
| png | image/png | PNG图片 |
| jpg, jpeg | mage/jpeg | JPEG图片 |
| tar | application/x-tar | TAR文件 |
| gzip | application/x-gzip | GZIP文件 |
| … | … | … |
Blob对象
了解一下，Blob对象有哪些属性，这是一个存储了二进制的原始数据文件，类似与File文件对象的只读文件，是临时存放的，方便缓存和处理文件
- 文件类型 MIME type
- 文件内容 base64 或 blobURL
创建一个blob对象
/**
* 文本转blob对象
* @param String text 文本内容
* @param String type MIME 类型
*/
function createObjectBlob(text,type='text/plain'){
return new Blob([text], { type });
}
可将blob对象转file对象
/**
* blob转file对象
* @param String blob 对象
* @param String filename 文件名
* @param String type MIME 类型
*/
function createObjectFile(blob,filename,type='text/plain'){
return new File([blob],filename,{ type });
}
可将blob对象转换临时文件l路径url
/**
* blob转url临时访问地址
* @param String blob 对象
*/
function createObjectURL(blob){
return URL.createObjectURL(blob);
}
File对象
了解一下，File对象有哪些属性，我们知道，可通过选择文件上传用到的HTML标签<input type="file" />，从中可得到上传文件的File对象实例
- 文件名 filename, 例如 readme.txt
- 文件类型 MIME type
- 文件内容
创建一个file对象
/**
* 文本转file对象
* @param String text 文本内容
* @param String filename 文件名
* @param String type MIME 类型
*/
function createObjectFile(text,filename,type='text/plain'){
return new File([text],filename,{ type });
}
可将file对象转blob对象
/**
* file转blob对象
* @param String file 对象
*/
function createObjectBlob(file){
return new Blob([file],{type:file.type});
}
将file对象转换为临时文件路径url
/**
* file转url临时访问地址
* @param String file 对象
*/
function createObjectURL(file){
return URL.createObjectURL(file);
}
URL临时路径
了解一下，URL临时路径，还可以命名为TempFilePath，见名知意，是Blob对象的临时文件位置，用于访问文件资源
临时文件路径url可以转换为file对象
/**
* url临时访问地址转file对象
* @param { url, filename, type, success, fail } 临时地址，文件名，MIME类型，成功回调，失败回调
*/
function createObjectFile(e){
const { url, filename } = e;
const encode = e.encode || 'utf-8';
const type = e.type || 'text/plain';
let reader = new FileReader();
reader.onloadend = () => {
if(url.startsWith('data:') type=url.split(',')[0].match(/:(.*?);/)[1];
let file = new File([reader.result],filename,{ type });
e.success({ file });
};
if(e.fail) reader.onerror = e.fail;
if(type.startsWith('text')) reader.readAsText(url, encode);//读取文本
else if(type.startsWith('image')) reader.readAsDataURL(url, encode);//读出的是base64字符串 可赋值给标签img.src
else reader.readAsArrayBuffer(url, encode);//读出的是ArrayBuffer对象
}
注意url如果是base64字符串（以
data:开头）表示形式，字符串是会比较长，这可不是临时文件路径，这只是直接将文件内容转换为字符串编码，所以会看到字符串会比较长，这可不适用大文件处理哦，通常用于图标或图像文件处理和显示
临时文件路径url可以转换为blob对象
/**
* url临时访问地址转blob对象
* @param { url, success, fail } 临时地址，成功回调，失败回调
*/
function createObjectBlob(e){
const { url } = e;
try{
if(url.startsWith('data:')){
let arr = url.split(','),
type = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--) u8arr[n] = bstr.charCodeAt(n);
e.success({
blob: new Blob([u8arr], { type })
});
}else{
let xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = () => e.success({
blob: xhr.response
});
if(e.fail) xhr.onerror = e.fail;
xhr.open('GET', url);
xhr.send();
}
}catch(err){
if(e.fail) e.fail(err)
}
}
例如这样调用
createObjectBlob({
url:'blob:http://localhost:...',
success(res){
const { blob } = res;
//...
}
})
注意临时文件路径url的表示形式
base64 例如 data:text/plain;base64,b2ZmaWNlMjAxOea/gOa0u+WvhumSpe…
blob 例如 blob:http://localhost:…文章来源：https://www.toymoban.com/news/detail-407281.html
文章来源地址https://www.toymoban.com/news/detail-407281.html
到了这里，关于【JavaScript】如何转换blob数据与file文件还有url的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
