记录一下上传文件时将文件数据转为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. 利用matlab求图像均值和方差的几种方法

    一.求均值 % 求一副灰度图像的均值 close all; clear; clc; i=imread('d:/lena.jpg'); %载入真彩色图像 i=rgb2gray(i); %转换为灰度图 i ...

  2. 编写一个c++工程

    c++接触的很少,之前也只是会编写一个简单的cpp文件,但一个工程的实现,往往不仅包括源文件(.cpp后缀文件)一般还有头文件(.h后缀文件)等.一个c++工程中只能有一个main函数,这个函数所在的 ...

  3. Redis笔记(4)独立功能的实现

    1.前言 本节记录一下redis的一些功能上的实现,包括发布订阅.事务.Lua脚本.排序.二进制位数组.慢查询日志和监视器. 2.发布订阅 上一章介绍sentinel的时候说到了sentinel会订阅 ...

  4. WTF小程序之<web-view>

    叨叨两句 昨天爬了一下午坑才出来的我向大家问好

  5. 获取Javascript 滚动条距离顶部的距离(兼容IE6+,火狐,谷歌,其它没测)

    document.body.scrollTop || document.documentElement.scrollTop

  6. [Python 从入门到放弃] 2. 列表的其它操作

    1. 列表可以混合不同类型的数据项 movies=['<黄飞鸿之英雄有梦>','<寒战2>','<乘风破浪>'] 在这句代码中,数据项为电影名称,现在这个列表用来保 ...

  7. es-05-获取 resthighlevelclient及api

    在6.x以前, 使用最多的是transportclient, 但在7.x会被废弃, 先说以前的创建方式: 具体可见:https://www.cnblogs.com/wenbronk/p/6383194 ...

  8. Andrew Ng机器学习课程笔记(一)之线性回归

    Andrew Ng机器学习课程笔记(一)之线性回归 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7364598.html 前言 ...

  9. shell脚本案例分享 - 业务系统日志自定义保留或删除需求

    需求说明:  线上某些业务系统的日志不定期产生, 有的每天产生, 有的好几天才产生, 因为系统只有在用的时候才产生日志,日志文件均存放在以当天日期命名的目录下. 当日志目录越来越多时就需要处理, 由此 ...

  10. Go的基本类型与变量

    基本类型 布尔型:bool 长度:1字节 取值范围:true,false 注意:不可以用数字代表true或false 整型:int/uint 根据运行平台可能为32或64位 8位整型:int8/uin ...