【JavaScript】如何转换blob数据与file文件还有url

大家好，关于blob对象和file对象有了解多少呢，它们都是一种文件的表示形式，文件之间是可以互相转换的，顺带一提，还有经常用到的临时文件路径tempFileURL。

文章目录

文件类型

首先，需要先知道文件类型有哪些，我们可以通过文件名后缀判断

常见的文件类型列表
文件后缀MIME类型说明txttext/plain文本文件htm, htmltext/htmlHTML文本pdfapplication/pdfPDF文档docapplication/mswordWord文档pngimage/pngPNG图片jpg, jpegmage/jpegJPEG图片tarapplication/x-tarTAR文件gzipapplication/x-gzipGZIP文件………

Blob对象

了解一下，Blob对象有哪些属性，这是一个存储了二进制的原始数据文件，类似与File文件对象的只读文件，是临时存放的，方便缓存和处理文件

• 文件类型 MIME type
• 文件内容 base64 或 blobURL

创建一个blob对象

/**
* 文本转blob对象
* @param String text 文本内容
* @param String type MIME 类型
*/functioncreateObjectBlob(text,type='text/plain'){returnnewBlob([text],{ type });}

可将blob对象转file对象

/**
* blob转file对象
* @param String blob 对象
* @param String filename 文件名
* @param String type MIME 类型
*/functioncreateObjectFile(blob,filename,type='text/plain'){returnnewFile([blob],filename,{ type });}

可将blob对象转换临时文件l路径url

/**
* blob转url临时访问地址
* @param String blob 对象
*/functioncreateObjectURL(blob){returnURL.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 类型
*/functioncreateObjectFile(text,filename,type='text/plain'){returnnewFile([text],filename,{ type });}

可将file对象转blob对象

/**
* file转blob对象
* @param String file 对象
*/functioncreateObjectBlob(file){returnnewBlob([file],{type:file.type});}

将file对象转换为临时文件路径url

/**
* file转url临时访问地址
* @param String file 对象
*/functioncreateObjectURL(file){returnURL.createObjectURL(file);}

URL临时路径

了解一下，URL临时路径，还可以命名为

TempFilePath

，见名知意，是

Blob

对象的临时文件位置，用于访问文件资源

临时文件路径url可以转换为file对象

/**
* url临时访问地址转file对象
* @param { url, filename, type, success, fail } 临时地址，文件名，MIME类型，成功回调，失败回调
*/functioncreateObjectFile(e){const{ url, filename }= e;const encode = e.encode ||'utf-8';const type = e.type ||'text/plain';let reader =newFileReader();
    reader.onloadend=()=>{if(url.startsWith('data:') type=url.split(',')[0].match(/:(.*?);/)[1];let file =newFile([reader.result],filename,{ type });
        e.success({ file });};if(e.fail) reader.onerror = e.fail;if(type.startsWith('text')) reader.readAsText(url, encode);//读取文本elseif(type.startsWith('image')) reader.readAsDataURL(url, encode);//读出的是base64字符串 可赋值给标签img.srcelse reader.readAsArrayBuffer(url, encode);//读出的是ArrayBuffer对象}

注意url如果是base64字符串（以

data:

开头）表示形式，字符串是会比较长，这可不是临时文件路径，这只是直接将文件内容转换为字符串编码，所以会看到字符串会比较长，这可不适用大文件处理哦，通常用于图标或图像文件处理和显示

临时文件路径url可以转换为blob对象

/**
* url临时访问地址转blob对象
* @param { url, success, fail } 临时地址，成功回调，失败回调
*/functioncreateObjectBlob(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 =newUint8Array(n);while(n--) u8arr[n]= bstr.charCodeAt(n);
            e.success({blob:newBlob([u8arr],{ type })});}else{let xhr =newXMLHttpRequest();
            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:…