记录一下上传文件时将文件数据转为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. 好用的在线工具汇总:Iconfont图标,数据mock,时间函数库,颜色查询 等

    一   时间函数库 ———http://momentjs.com/ 非常全的时间处理函数库,引入使用非常方便. 二   Iconfont———http://www.iconfont.cn/ 各种小图标 ...

  2. Hadoop 2.4.1+HBase 0.98.6.1 分布式安装

    参考:http://blog.csdn.net/wind520/article/details/39856353

  3. 再谈C#委托与事件

    之前写过一篇关于C#委托与事件的文章(见<C#委托和事件例析>),不过还是收到一些网友的提问.所以,今天再换另一个角度来详解一下这个问题. 一.在控制台下使用委托和事件 我们都知道,C#中 ...

  4. makemigrations migrate

    教程 如何重置迁移 (图片:https://www.pexels.com/photo/sky-flying-animals-birds-1209/) Django迁移系统的开发和优化使其能够进行大量迁 ...

  5. Openstack单元测试工具简单说明

    一.Openstack 的单元测试工具介绍 1.unittest unittest: 是 Python 的标准库,提供了最基本的单元测试功能,包括 单元测试运行器(简称runner) 和 单元测试框架 ...

  6. 深入聊聊Java多线程

    一.背景 在没有学习Java多线程以前,总觉得多线程是个很神秘的东西,只有那些大神才能驾驭,新年假期没事就来学习和了解一下Java的多线程,本篇博客我们就来从头说一下多线程到底是怎么回事. 二.概述 ...

  7. vuex详细介绍和使用方法

    1.什么是vuex? 官方的解释: Vuex是一个专为Vue.js应用程序开发的状态管理模式 当项目比较庞大的时候,每个组件的状态比较多,为了方便管理,需要把组件中的状态抽取出来,放入Vuex中进行统 ...

  8. PHP MYSQL登陆和模糊查询

    PHP MYSQL登陆和模糊查询   PHP版本 5.5.12    MYSQL版本 5.6.17  Apache 2.4.9 用的wampserver 一.PHPMYSQL实现登陆:  一共含有两个 ...

  9. logstash-3-输出到es中

    之前测试 filebeat和logstash的时候, 使用的是stdout标准输出, 现在我们想把数据输出到es中去, 1, 首先需要一个es: 修改配置文件 后台启动 ./bin/elasticse ...

  10. 关于Mybatis与Spring整合之后SqlSession与mapper对象之间数量的问题。

    1,sqlsession的真实类型和数量 由于使用spring管理bean,当我们在代码中需要使用这个bean的时候,会首先去容器中找,第一次需要调用MapperFactoryBean的getObje ...