常见的文件格式

一、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);
相关推荐
J不A秃V头A35 分钟前
Vue3:编写一个插件(进阶)
前端·vue.js
司篂篂1 小时前
axios二次封装
前端·javascript·vue.js
姚*鸿的博客1 小时前
pinia在vue3中的使用
前端·javascript·vue.js
宇文仲竹2 小时前
edge 插件 iframe 读取
前端·edge
Kika写代码2 小时前
【基于轻量型架构的WEB开发】【章节作业】
前端·oracle·架构
天下无贼!3 小时前
2024年最新版Vue3学习笔记
前端·vue.js·笔记·学习·vue
Jiaberrr3 小时前
JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)
前端·javascript·tree·树形·过滤筛选
赵啸林3 小时前
npm发布插件超级简单版
前端·npm·node.js
我码玄黄4 小时前
THREE.js:网页上的3D世界构建者
开发语言·javascript·3d
罔闻_spider4 小时前
爬虫----webpack
前端·爬虫·webpack