DataUrl转换为File对象上传

1,302 阅读1分钟
  1. 背景: .exe桌面应用连接扫描仪,扫描得到图片直接通过web上传到服务器。

  2. 实现方式: 扫描完成,与c++通信直接获取DataUrl,转为Feil对象上传。

/**
* base64图片 转图片file对象
*/
dataURLToBlob = (dataurl: String, fileName: string) => {
    let arr = dataurl.split(',');
    // 获取文件类型
    let mime = (arr[0].match(/:(.*?);/) as any)[1];
    // 解码base64字符串
    let bstr = atob(arr[1]);
    let n = bstr.length;
    // 创建一个内容长度的数组,每个元素为对应字符串的Unicode码
    // 数组类型表示一个8位无符号整型数组,创建时内容被初始化为0。
    let u8arr = new Uint8Array(n);
    // UTF-16 编码单元匹配 Unicode 编码单元
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
};

举例:

<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">

split切割字符串,arr[0]是文件信息,arr[1]是文件内容,为编码过的base64

atob解码base64