常见的文件格式

一、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);
相关推荐
素界UI设计40 分钟前
开源网页生态掘金:从Bootstrap二次开发到行业专属组件库的技术变现
前端·开源·bootstrap
潘小安42 分钟前
【译】六个开发高手使用的 css 动画秘诀
前端·css·性能优化
前端开发爱好者1 小时前
尤雨溪官宣:Vite 历史性的一刻!超越 Webpack!
前端·javascript·vite
前端开发爱好者1 小时前
Vue3 "抛弃" Axios !用上了 专属请求库!
前端·javascript·vue.js
前端开发爱好者1 小时前
"Lodash" 的终极版!Vue、React 通杀!
前端·javascript·全栈
前端开发爱好者1 小时前
TanStack:不止于 Vue!一个库,真·通杀所有框架!
前端·javascript·vue.js
curdcv_po1 小时前
Three.js,给纹理,设颜色空间
前端
站大爷IP1 小时前
HTTPS代理抓包完全攻略:工具、配置与高级技巧
前端
洛卡卡了1 小时前
“改个配置还要发版?”搞个配置后台不好吗
前端·后端·架构
林太白1 小时前
CommonJS和ES Modules篇
前端·面试