记录一下上传文件时将文件数据转为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. python使用selector模块编写FTP

    server import os import socket import time import selectors BASE_DIR = os.path.dirname(os.path.abspa ...

  2. Fiddler抓包连接失败502的解决方法

    本篇用户记录,在用Fiddler遇到过的坑,首先, 先上图,遇到的问题,提示主机连接失败.只是打开Fiddler,不会报这个问题,只有当Fiddler和火狐浏览器一起启动的时候,才会报这个错. 尝试去 ...

  3. POJ 2845

    #include <iostream> #include <string> #include <algorithm> #define MAXN 350 using ...

  4. 【Canal源码分析】client工作过程

    client的工作过程,需要我们自己去编写对应的逻辑,我们目前只能从example写的例子来看.目前examle中提供了两个例子,一个是单机的,一个是集群的cluster,我们后续如果需要进行开发的话 ...

  5. logstash使用template提前设置好maping同步mysql数据到Elasticsearch5.5.2

    上篇blog说到采用logstash-input-jdbc将mysql数据同步到ES(http://www.cnblogs.com/jstarseven/p/7704893.html),但是这里有一个 ...

  6. 轻量级web富文本框——wangEditor使用手册(4)——配置下拉菜单 demo

    最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...

  7. jdbc mysql driver 6.0.2

    url = jdbc:mysql://localhost:3306/hibernate?useUnicode=true&characterEncoding=UTF-8&useLegac ...

  8. webpack4 自学笔记五(tree-shaking)

    全部的代码及笔记都可以在我的github上查看, 欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/ThreeS ...

  9. 为PartialView传递一个参数

    看这篇之前,得先了解这个<在MVC应用程序中动态加载PartialView>http://www.cnblogs.com/insus/p/3547985.html. 因为是从这篇重构而来. ...

  10. c# 读取机器CPU信息,硬盘信息,网卡信息

    Windows 管理规范 (WMI) 是可伸缩的系统管理结构,它采用一个统一的.基于标准的.可扩展的面向对象接口.WMI 为您提供与系统管理信息和基础 WMI API 交互的标准方法.WMI 主要由系 ...