常见的文件格式

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

实现方式:

复制代码
    <input onchange="test(this.value)" type="file"></input>
    <script>
        function test(e){
            console.log(e,Object.prototype.toString.call(e))
        }
    </script>

二、fileMDN

实现方式:

复制代码
1.html中
    <input  id="aaa" type="file"></input>
    <script>
        const inp = document.getElementById("aaa");
        inp.onchange= (e) =>{
            const file = inp.files[0];
            if(!file){
                return;
            }
            console.log(file)
        }
    </script>
2.vue中
    <div class="upload" @click="uploadFile">上传.log文件进行解析</div>
    async uploadFile() {
      const arrFileHandle = await window.showOpenFilePicker({});
      let fileName = await arrFileHandle[0].getFile();
      console.log(fileName);
    }

三、blobMDN

实现方式:

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

四、里面有base64格式

实现方式:

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

复制代码
    oFReader = new FileReader()
    oFReader.onload = function (oFREvent) {
        console.log(oFREvent,1,oFREvent.target.result);
    };
    oFReader.readAsDataURL(fileName);

四、

实现方式:

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

五、ArrayBuffer

实现方式:

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

复制代码
      const reader = new FileReader();
      reader.onloadend = function () {
        const arrayBuffer = reader.result;
        // 进行相应的操作
        console.log(arrayBuffer);
      };
      reader.readAsArrayBuffer(fileName);
相关推荐
林太白18 分钟前
npm多组件发布Vue3+TS版本,快来像Antd一样搭建属于你的UI库吧
前端·javascript·node.js
Juchecar25 分钟前
如何避免Node.js项目node_modules重复占用空间
前端
百罹鸟37 分钟前
nestjs 从零开始 一步一步实践
前端·node.js·nestjs
袁煦丞43 分钟前
Wiki.js团队知识大脑/个人笔记管家:cpolar内网穿透实验室第496个成功挑战
前端·程序员·远程工作
Alporal1 小时前
【前端学习】背闭包快疯了?我用实际场景搞懂了!
javascript
维他AD钙1 小时前
2025 年前端性能优化实战:从加载到渲染的全链路优化指南
前端
大米饭消灭者1 小时前
markdown-it是怎么将markdown转为html的
前端·面试
1024小神2 小时前
在vue/react项目中单独引入一个js文件,在js文件中使用DOMContentLoaded函数querySelectorAll为空数组解决办法
前端
moyu842 小时前
前端请求封装实战解析:基于Axios的封装技巧
前端