记录一下上传文件时将文件数据转为Base64的方法

通过 FileReader对象创建一个实例,然后使用 readAsDataURL方法将数据转为Base64格式

注意: 读取过程是异步的

绑定onload事件,该事件在数据读取完成后触发

具体代码(react项目中):

const reader = new window.FileReader();

reader.readAsDataURL(fileObject);

reader.onload = () => {

Base64Data = reader.result;  // reader.result 就是转成base64的数据

};

FileReader对象的更多信息:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

上传文件Base64格式(React)的更多相关文章

  1. $Django ajax简介 ajax简单数据交互,上传文件(form-data格式数据),Json数据格式交互

    一.ajax  1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json  2 ajax干啥用的?前后端做数据交互:  3 之前学的跟后台做交互的方式:   -第一种:在浏览器 ...

  2. js jquery验证上传文件的格式和大小

    // 验证附件格式和大小 function confirmData() { var flag = true; var message = ""; var errorSize = & ...

  3. input[type=file]上传文件(格式判断、文件大小、上传成功后操作)

    var isUploadImg = false; //在input file内容改变的时候触发事件******************上传图片 $('#filed').change(function( ...

  4. angulaijs中的ng-upload-file与阿里云oss服务的结合,实现在浏览器端上传文件到阿里云(速度可以达到1.5M)

    2015-10-26 angularjs结合aliyun浏览器端oos文件上传加临时身份验证例子 在服务端获取sts 源码: public class StsServiceSample { // 目前 ...

  5. C# 通用上传文件类

    1.Upfile.aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="U ...

  6. ASP.NET上传文件的几种方法

      //上传文件实例 if (fileDealer.HasFile)//判断文件是否存在        {            string filepath = "";     ...

  7. 【.NET】上传文件,生成缩略图

    类名:Upload using System; using System.Collections; using System.ComponentModel; using System.Data; us ...

  8. Spring 上传文件

    最近碰到一个上传文件的需求,其实之前也做过但是都是search->copy 没有细究过,这次纯手工. 先看一下需要依赖的包: <dependency> <groupId> ...

  9. spring 上传文件文件的一个例子,

    /** * 类名称:UploadTest 类描述:创建人:zhang 创建时间:2015年3月13日 下午4:20:57 修改人:zhang * 修改时间:2015年3月13日 下午4:20:57 修 ...

随机推荐

  1. flask_mysql入库

    mysql 的入库和MongoDB的有一点点的区别 不过都很重要,都必须要掌握的技能, 现在我来演示一下mysql入库的过程: 首先  我们要导包,这是必不可少的一部分,都不用我说了吧 #导报 imp ...

  2. JavaSE-异常

    1.try catch finally 异常捕获 public class ExceptionTest { public static void main(String[] args) { int a ...

  3. 使用 Scrapyd 管理部署 Scrapy 的一些问题

    环境:Ubuntu Xenial (16.04) Scrapy 是一个不错的爬虫框架,但是不支持定时执行,常规的做法是使用 crontab 的方式进行定时执行 shell ,当爬虫数量多的时候,管理起 ...

  4. FineBI学习系列之FineBI的ETL处理(图文详解)

    不多说,直接上干货! 这是来自FineBI官网提供的帮助文档 http://help.finebi.com/http://help.finebi.com/doc-view-48.html 目录: 1. ...

  5. React技术栈梳理

    一.react是什么? react是一个js框架,可以用它来编写html页面,使用react后我们可以完全抛弃html(只需要一个主index文件),而用纯js来编写页面: 二.为什么要使用react ...

  6. JNI的又一替代者—使用JNR访问Java外部函数接口(jnr-ffi)

    1. JNR简单介绍 继上文“JNI的替代者—使用JNA访问Java外部函数接口”,我们知道JNI越来越不受欢迎,JNI是编写Java本地方法以及将Java虚拟机嵌入本地应用程序的标准编程接口.它管理 ...

  7. Tomcat学习总结(1)——Tomcat入门教程

    一.打包JavaWeb应用 在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命令的用法如下: 范例:将JavaWebDemoProject这个Ja ...

  8. 第一次项目上Linux服务器(三:安装Tomcat及相关命令)

    一.下载Tomcat 去官网:http://tomcat.apache.org/ 找到要下载的Tomcat 本人下载的是apache-tomcat-8.5.29.tar.gz,百度云资源链接:链接:h ...

  9. C# Claims-based(基于声明)的认证

    本文是通过验证与网上资料整合的,请读者注意. 目录: 1. 什么是Claims-based认证 2.进一步理解Claims-based认证 3.Claims-based的简单demo 1. 什么是Cl ...

  10. 设计模式学习--面向对象的5条设计原则之开放封闭原则--OCP

    一.OCP简介(OCP--Open-Closed Principle):Software entities(classes,modules,functions,etc.) should be open ...