vue ts上传大图片，转换为base64

最新推荐文章于 2024-07-07 21:27:28 发布

布袋里长出了橘猫

最新推荐文章于 2024-07-07 21:27:28 发布

阅读量1k

点赞数 1

分类专栏：前端 html typescript 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_37617413/article/details/121554173

版权

前端同时被 3 个专栏收录

14 篇文章

订阅专栏

html

5 篇文章

订阅专栏

typescript

5 篇文章

订阅专栏

该博客介绍了如何利用HTML的`<input type='file'>`元素结合JavaScript的FileReader API实现文件选择和读取，将选取的文件转换为Base64格式。在`fileChangeHandler`函数中，文件被读取并加载到FileReader对象，当读取完成时，数据以Base64形式打印到控制台，并调用`base64Upload`函数进行上传。这是一个前端开发中常见的文件处理场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// html部分
<input
     type="file"
     class="shadow-input"
     multiple="multiple"
     οndragenter="return false"
     @change="fileChangeHandler"
     ref="file"
 />
 
//js部分             
fileChangeHandler(event: any) {
        let _files = event.target.files;
        let myFile:any = this.$refs.file
        var reader = new FileReader();
        reader.readAsDataURL(myFile.files[0]);    // 解析成base64格式
        reader.onload = function () { 
            console.log(this.result);        // 解析后的数据
            base64Upload({fileBase64:this.result})
        }
        return
  }