前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Base64文件上传(Use C#)

Base64文件上传(Use C#)

作者头像
宿春磊Charles
发布2022-03-29 09:31:50
3.6K0
发布2022-03-29 09:31:50
举报
文章被收录于专栏:DotNet 致知DotNet 致知

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,它是一种基于64个可打印字符来表示二进制数据的方法。

使用base64进行文件上传的具体流程是:前台使用js将文件转换为base64格式,后台通过高级编程语言,将base64格式的文件,转换为原文件。下面就来演示一下,C#语言配合js,如何实现图片的base64格式上传与解析保存。

首先看一下前台是如何将文件读取到的,请先看如下js代码:

代码语言:javascript
复制
var DataforUp = "";
  var reader = new FileReader(); //声明文件读取对象
//声明文件读取完毕后调用的方法,通过this.result获取到转换的数据对象
  reader.onload = function () {
      DataforUp = this.result;
  };
//当用户选择文件后,进行转换数据的操作
  $("#file").change(function () {
      reader.readAsDataURL(this.files[0]);
  });

文件的读取,需要借助于FileReader这个对象,DataforUp用于保存base64源码。#file该id对应文件选择标签。

FileReader对象有个onload事件,当读取文件的时候(或者说调用readAsDataURL方法后),会触发此事件,base64转换的源码就存在于它的result属性中。

下面具体解释一下上述代码:

当用户选择文件后,使用FileReader对象读取文件,读取后自动转换为base64格式,然后触发该对象的onload方法,将转换后的base64源码保存下来。

这样我们就拿到了base64格式的文件源码,通过ajax,就可以将文件发送到后台。

接下来看一下后台是如何解析并保存的:

代码语言:javascript
复制
public string SaveImgBaseSixFour(string img,string obj)
{
if(img==null){
return "数据为空";
  }
  string result = img;
  int index = -1;
//判断是不是base64文件类型
  index = img.IndexOf("base64,");
if (index != -1)
  {
      index += 7;
//将数据转换为二进制字节数组
var imgbit = Convert.FromBase64String(img.Substring(index));
//生成文件名
      string imgname = DateTime.Now.ToString("yyyyMMddHHmmss") + ".jpg";
//保存图片
using (Image image=Image.FromStream(new MemoryStream(imgbit)))
      {
          image.Save(_rootPath+imgname,ImageFormat.Jpeg);
      }
   }
}

base64源码的基本模型是 data:image/png;base64,...文件码...=

data标识文件类型,紧接着base64,开头的文件源码最后以=结束,所以解析的时候要去掉开头这一部分,本案例图片扩展名是写死的,也可以通过base64文件头去获取图片的扩展名,此处不再详细介绍。

解析一下代码流程:

判断文件是否为空,然后获取到真正数据的开始索引,然后调用Convert.FromBase64String方法将base64转换为原文件,然后通过文件流将内存中保存的文件数据真实保存到本地。具体使用方法,读者可自行查阅官方文档,此处不再赘述。

本节到此结束...

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-07-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 DotNet 致知 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档