• 常见的文件格式

    https://blog.csdn.net/weixin_45811256/article/details/112575704

    文件流转arrayBuffer转base64

    一、C:\fakepath\新建文本文档.txt [object String]

            实现方式：

    1.     <input onchange="test(this.value)" type="file"></input>
    2.     <script>
    3.         function test(e){
    4.             console.log(e,Object.prototype.toString.call(e))
    5.         }
    6.     </script>

    二、fileMDN

            实现方式：

    1. 1.html中
    2.     <input  id="aaa" type="file"></input>
    3.     <script>
    4.         const inp = document.getElementById("aaa");
    5.         inp.onchange= (e) =>{
    6.             const file = inp.files[0];
    7.             if(!file){
    8.                 return;
    9.             }
    10.             console.log(file)
    11.         }
    12.     </script>
    13. 2.vue中
    14.     <div class="upload" @click="uploadFile">上传.log文件进行解析</div>
    15.     async uploadFile() {
    16.       const arrFileHandle = await window.showOpenFilePicker({});
    17.       let fileName = await arrFileHandle[0].getFile();
    18.       console.log(fileName);
    19.     }
    20.  
    21.  
    22.     <input type='file' @change="handleFileChange" />
    23.         handleFileChange(event) {
    24.       console.log(event)
    25.       console.log(event.target.files[0]);
    26.       return}

    三、blobMDN

            实现方式：

            将上放第二点获取到的file对象比如为fileName，new Blob([fileName])就可以实现

    四、里面有base64格式

            实现方式：

            将上放第二点获取到的file对象比如为fileName，

    1.     oFReader = new FileReader()
    2.     oFReader.onload = function (oFREvent) {
    3.         console.log(oFREvent,1,oFREvent.target.result);
    4.     };
    5.     oFReader.readAsDataURL(fileName);

    四、blob URL 可以放到a/img标签里直接使用

      实现方式：

            1、这种格式是用vant的uploader组件获取的，看上去url是个字符串，但可以直接传给后端完成文件上穿，非常神奇。

            2、也可以使用第三点中的blob通过：URL.createObjectURL(blob) 直接转换（web端，移动端不太可用）

    五、ArrayBuffer

      实现方式：

             将上放第二点获取到的file对象比如为fileName

    1.       const reader = new FileReader();
    2.       reader.onloadend = function () {
    3.         const arrayBuffer = reader.result;
    4.         // 进行相应的操作
    5.         console.log(arrayBuffer);
    6.       };
    7.       reader.readAsArrayBuffer(fileName);

    六、[80, 75, 3, 4, 20, 0, 6, 0, 8, 0, 0, 0, 33, 0, 190, 26, 137, 252, 233, 1, 0, 0, 153, 9, 0, 0, 19, 0, 8, 2, 91, 67, 111, 110, 116, 101, 110, 116, 95, 84, 121, 112, 101, 115, 93, 46]

            将上放第五点获取到的ArrayBuffer对象比如为arrayBuffer

    1.             var int8Array = new Int8Array(arrayBuffer);
    2.             var uint8Array = new Uint8Array(arrayBuffer);
    3.             var int16Array = new Int16Array(arrayBuffer);
    4.             var int32Array = new Int32Array(arrayBuffer);
    5.             
    6.             console.log(int8Array, int8Array.length)
    7.             console.log(uint8Array, uint8Array.length)
    8.             console.log(int16Array, int16Array.length)
    9.             console.log(int32Array, int32Array.length)

    但不一定每个文件都有int16Array或者int32Array，得到如下

    文件转换

    一，file文件类型和blob文件类型之间转换

    如图所示input标签获取到是file对象，转换成blob后进行切割，然后转换成原file对象

    二，blob,file,二进制流

    file-ArrayBuffer-Unit8Array-blob-file

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9. <body>
    10.   <input  id="aaa" onchange="fileChange()" type="file"></input>
    11.   <script>
    12.       const inp = document.getElementById("aaa");
    13.       inp.onchange= (e) =>{
    14.         console.log(e)
    15.           const file = inp.files[0];
    16.           if(!file){
    17.               return;
    18.           }
    19.           const fileType = file.type;
    20.           const fileName = file.name;
    21.           console.log(file, file.name, file.size, file.type)
    22.           
    23.           const reader = new FileReader();
    24.           reader.onloadend = function () {
    25.             const arrayBuffer = reader.result;
    26.             console.log(arrayBuffer);
    27.  
    28.             var uint8Array = new Uint8Array(arrayBuffer);
    29.             console.log(uint8Array, uint8Array.length)
    30.  
    31.             var blob = new Blob([uint8Array], { type: fileType});
    32.             console.log(blob)
    33.  
    34.             var sbFile = new File([blob], fileName, { type: fileType });
    35.             console.log(sbFile)
    36.           };
    37.           reader.readAsArrayBuffer(file);
    38.       }
    39.   </script>
    40. </body>
    41. </html>

    三、读取文件并在控制台输出

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9. <body>
    10.   <input  id="aaa" onchange="fileChange()" type="file"></input>
    11.   <script>
    12.       const inp = document.getElementById("aaa");
    13.       inp.onchange= (e) =>{
    14.         console.log(e)
    15.         const files = e.target.files;
    16.         for (let i = 0; i < files.length; i++) {
    17.           const file = files[i];
    18.           const reader = new FileReader();
    19.           // 监听readAsText方法的加载完成事件
    20.           reader.onload = function() {
    21.             // 将文件内容按行拆分
    22.             console.log(reader.result);
    23.             const lines = reader.result.split('\n');
    24.             // 遍历每一行内容
    25.             for (let j = 0; j < lines.length; j++) {
    26.               const line = lines[j];
    27.               // 在控制台中输出每一行的内容
    28.               console.log(line);
    29.             }
    30.           };
    31.           // 使用readAsText方法读取文件内容
    32.           reader.readAsText(file);
    33.         }
    34.       }
    35.   </script>
    36. </body>
    37. </html>

    四、读取文件并转换成blob

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9. <body>
    10.   <input  id="aaa" onchange="fileChange()" type="file"></input>
    11.   <script>
    12.       const inp = document.getElementById("aaa");
    13.       inp.onchange= (e) =>{
    14.         console.log(e)
    15.           const file = inp.files[0];
    16.           if(!file){
    17.               return;
    18.           }
    19.           var reader = new FileReader();
    20.           reader.onload = function(e) {
    21.             var fileContent = e.target.result;
    22.             // 将文本内容转换为Blob对象
    23.             var blob = new Blob([fileContent], { type: file.type });
    24.             
    25.             // 使用slice方法将Blob对象转换为File对象
    26.             var convertedFile = blob.slice(0, blob.size, file.name);
    27.             
    28.             // 在这里可以继续处理转换后的File对象
    29.             console.log(convertedFile);
    30.           };
    31.           reader.readAsText(file);
    32.           
    33.       }
    34.   </script>
    35. </body>
    36. </html>

    五、mp3转arrayBuffer

    1. mp3toArrayBuffer() {
    2. 	axios({
    3. 		method: 'get',
    4. 		url: this.imageListAll[this.templateId - 1].template_audio,
    5. 		responseType: 'arraybuffer'
    6. 	}).then((res) => {
    7. 		console.log('mp3的arraybuffer', res.data) //这个是arraybuffer
    8. 		this.audio = res.data
    9. 		this.imgArrayBufferData.push({
    10. 			name: 'bg',
    11. 			data: this.audio
    12. 		})
    13. 	})
    14. },

      实际上传

    一、   file对象：现在获取到了第二点中的file对象要求要使用post请求传输给后端：

    一般的请求是：

    接口报500，把接口改造成如下form-data的格式就好

    二、二进制格式

    类似以上的格式，需要设置  请求头的文件格式Content-Type：application/octet-stream

    除此之外还需要设置   请求头字段x-ext：.jpg，对于获取到的file对象file.name.split('.').pop()

    以xhr为例：

    1. xhr.setRequestHeader('Content-Type', 'application/octet-stream')
    2. xhr.setRequestHeader('x-ext', '.' + file.name.split('.').pop())

    三、base64格式

    base64格式上传就会比较简单，他的请求头Content-Type和普通的请求是一样的application/json

    基本上不用改造请求头

    将获取到的base64值假设为A

    获取文件类型   A.splice('.').pop()

    文件大小限制 1M file.size > 1*1024*1024

    一般是设置响应头responseType:blob(会将文件流转化为blob对象)

    后端返回blob对象后使用window.URL.createObjectURL(blob)转换为blob URL，就可以在a/img标签上直接使用了，下载完成后要及时删除dom元素和blobURL以免造成内存泄漏(window.URL.revokeObjectURL(link.href))

    1. export const exportFile = (url) => {
    2.   return request({
    3.     url: url,
    4.     method: "get",
    5.     responseType: "blob",
    6.   });
    7. };
    8. // 这里是在定义exportFile的时候添加了返回的数据格式  responseType:blob
    9. exportFile(params).then((response) => {
    10.         let blob = response.data;
    11.         console.log(blob)
    12.         let fileName = decodeURI(Object.values(response.headers)[1])
    13.           .split("''")
    14.           .pop();
    15.         var link = document.createElement("a");
    16.         link.href = window.URL.createObjectURL(blob);
    17.         console.log(link.href)
    18.         link.download = fileName;
    19.         link.click();
    20.         window.URL.revokeObjectURL(link.href);
    21.       });

    返回的是文件流的格式转化为

    1. fetch(url,{
    2.     method: 'get',
    3.     responseType: 'blob'
    4. }).then(res => {     
    5.     return res.blob();
    6. }).then(blob => {
    7.     let bl = new Blob([blob], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
    8.     let fileName = '文件名'+".xlsx";
    9.     var link = document.createElement('a');
    10.     link.href = window.URL.createObjectURL(blob);
    11.     link.download = fileName;
    12.     link.click();
    13. console.log(blob, link.href, link.download, link);
    14.     window.URL.revokeObjectURL(link.href);
    15. })
    16.  
    17.  
    18. //也有设置为arrayBuffer的
    19. fetch(url,{
    20.     method: 'get',
    21.     responseType: 'arraybuffer'
    22. }).then(res => {     
    23.     return res. arraybuffer();
    24. }).then(arraybuffer => {
    25.     let bl = new Blob([arraybuffer], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
    26.     let fileName = '文件名'+".xlsx";
    27.     var link = document.createElement('a');
    28.     link.href = window.URL.createObjectURL(blob);
    29.     link.download = fileName;
    30.     link.click();
    31.     window.URL.revokeObjectURL(link.href);
    32. })

    我们看下这里的各个参数代表啥意思

     它这个原理是啥呢，就是创建了一个,然后使用点击事件去完成

    然后到页面上点击这个标签就可以下载了。是一样的效果，但是实际呢，不可行的。

    现在是有url地址，（不管它是图片还是doc,txt,excel，png）通用的下载

    1. downloadFiles('http://60.204.133.97:9000/wdtek/upload/20240105/Snipaste_2023-08-09_11-05-18.png',"Snipaste_2023-08-09_11-05-18.png")
    2.     downloadFiles(url,name) {
    3.       fetch(url)
    4.         .then((response) => response.blob())
    5.         .then((blob) => {
    6.           const blobUrl = window.URL.createObjectURL(blob);
    7.           const link = document.createElement("a");
    8.           link.href = blobUrl;
    9.           link.download = name; // 提供您希望的文件名和扩展名
    10.           document.body.appendChild(link); // 附加到文档
    11.           link.click(); // 触发下载
    12.           document.body.removeChild(link); // 下载后移除元素
    13.           window.URL.revokeObjectURL(blobUrl); // 释放URL对象
    14.         })
    15.         .catch((e) => console.error(e));
    16.     },
    17.     downloadFile() {
    18.       this.downloadFiles(this.fileList[0].link,this.fileList[0].originalName)
    19.     }

    同事说window.open也可以，测试了只有图片可以，文件不太行，也不知道是不是我使用的方式对不对

  • 相关阅读:
    代码随想录二刷 ｜数组 ｜ 螺旋矩阵II
    关于头文件的使用
    【PHPWord】PHPOffice 套件之PHPWord快速入门
    分支预测机制
    TypeScript进阶知识之接口(接口定义、接口属性、可索引类型、接口表示函数类型、额外的属性检查、接口继承、接口与类型别名的区别)
    吴恩达—机器学习的六个核心算法
    使用Python的Pandas库操作Excel
    websocket基础
    数字货币和区块链：跨境电商的未来之革命
    React.js学习（二）：案例源码学习“排序动画”
  • 原文地址：https://blog.csdn.net/m0_47999208/article/details/133135380