记录一下上传文件时将文件数据转为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 with用法举例

    我们知道在操作文件对象的时候可以这么写 with open('a.txt') as f: '代码块' 上述叫做上下文管理协议,即with语句,为了让一个对象兼容with语句,必须在这个对象的类中声明_ ...

  2. iframe 跨域调用父级方法的方案

    一.如果高层域名相同的话,可以通过document.domain来实现跨域访问 例如: 父级域名:localhost:8080 子级域名:localhost:9090 那么可以设置document.d ...

  3. Web API 2 对于 Content-Length 要求严格

    最近在做一个工具,里面有一个发起http请求的操作,虽然工具不是用.NET写的,但是测试用服务器软件是.NET写的.在这里选择了ASP.NET MVC和Web API 2. 首先预定义Student与 ...

  4. tensorflow进阶篇-4(损失函数2)

    Hinge损失函数主要用来评估支持向量机算法,但有时也用来评估神经网络算法.下面的示例中是计算两个目标类(-1,1)之间的损失.下面的代码中,使用目标值1,所以预测值离1越近,损失函数值越小: # U ...

  5. 查看MySQL 表结构

    前言:最近在实习中,做到跟MySQL相关的开发时,想起了好久前的一个笔试题——查看数据库表结构有哪几种方法: (一)使用DESCRIBE语句 DESCRIBE table_name; 或DESC ta ...

  6. CDN基本工作过程

    看了一些介绍CDN的文章,感觉这篇是讲的最清楚的. 使用CDN会极大地简化网站的系统维护工作量,网站维护人员只需将网站内容注入CDN的系统,通过CDN部署在各个物理位置的服务器进行全网分发,就可以实现 ...

  7. Android中Serializable和Parcelable序列化对象详解

    学习内容: 1.序列化的目的 2.Android中序列化的两种方式 3.Parcelable与Serializable的性能比较 4.Android中如何使用Parcelable进行序列化操作 5.P ...

  8. wordpress获取文章所属分类

    1.获取全部分类 <?php foreach((get_the_category()) as $category){ echo $category->cat_name; } ?> 2 ...

  9. 百度&高德地图小区景点边界轮廓实现

    经常的我们在使用地图功能时,会发现在选择一个小区或者一个热门景点的时候,地图上面会给出其边界轮廓,能够方便我们知道其范围大小,有时候在我们使用地图组件的时候,也会面临着类似的需求.比如在地图上面标识出 ...

  10. 简单Demo 使用Code Fisrt步骤

    使用Code Fisrt步骤 1.开启VS,创建控制台项目:CodeFirstDemo1 2.利用NuGet引进 Entity Framework类库          图住:右击项目名称,在弹出的选 ...