时间戳

首页 > 解决方案 > nodejs - 如何将base64图像转换为图像对象

node.js - nodejs - 如何将base64图像转换为图像对象

问题描述

在前端，我使用的是 React。接受input图像文件

...
  onImageChange = event => {
    if (event.target.files && event.target.files[0]) {
      let img = event.target.files[0]; //This is the image object
      //Then convert img to base64
    }
  };
...
<input type="file" name="myImage" onChange={this.onImageChange} /> //accpet image file

CodeSandbox：https ://codesandbox.io/s/gallant-almeida-z6d1x?file=/src/App.js

图像对象会像这样 在此处输入图像描述

在后端，我使用的是node.js
前端会以base64为参数向后端发送api请求，
是否可以将其转换回后端的图像对象？

标签： node.jsreactjs

解决方案

您可以使用函数将 Base64 数据 uri 转换为 File 对象。

    // Function return a promise with File object
    function urltoFile(url, filename, mimeType){
        return (fetch(url)
            .then(function(res){return res.arrayBuffer();})
            .then(function(buf){return new File([buf], filename,{type:mimeType});})
        );
    }
    
    let base64image = 'iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAhGVYSWZNTQAqAAAACAAFARIAAwAAAAEAAQAAARoABQAAAAEAAABKARsABQAAAAEAAABSASgAAwAAAAEAAgAAh2kABAAAAAEAAABaAAAAAAAAAEgAAAABAAAASAAAAAEAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFKADAAQAAAABAAAAFAAAAABB553+AAAACXBIWXMAAAsTAAALEwEAmpwYAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgpMwidZAAACyklEQVQ4EY1US2tTQRSe3DxL2lAkD0rTGmOT5t1FVg1E0hIK3bcboe58rQVXXfRvRKkgihv9CxqEbLPrpgt110XqKkHzJNfvO869vYmheGCYM3POfHPmzHeOUjfigurm8uzszLO1tfU8Fou1IpFIZ2Njw+SgHo1GW7TRRx/lGZ4VsRQDK5OjUCicdDqd19CngUDgo9frbXa73W/0DgaD98fj8R7GkWmablz4+OLi4h1MxOGYYtygJ5PJN+Fw2EylUqeIgJcsFIAZ9EHEJs9oJwtUSeg00KFWqxUcKN58Pu9zrHnIXh8cHBTmQCVlamdn52QOLICD9o27u7t3isXiw8PDwxDBdfT0URYoU8W1ajQaXoANtre3T2VDKXGkXi6XvZyz2ezLUChk5nK5p8596OLL5+OzBvJRWDxDcn87csbILJE8ViqVu5lM5kW1Wl3TBstH7MwpAH/x9xWpsbm5+VY72vmxEPXsX11dfQB9kV1eQQxiGUBPG4bxRR+Ub3eASZJ9Pl8K1Pnq9/vvaZvNAKRFtoDRnE6naQ+cI8Ph8Lt2JBedIuvRaDTB5gB+nGdkZWVFfIgB3kYMl0vSYeVkxnluMVMRczZZEssA8k/HU24DXmjr9XqyD4xkv9+/ZoSXePu+vtHOzaIIFu21223ZBsae2+2+NMCv94jyWNNmBOuiSJinMcZ8juk7Jm0Gg8HR8vLyB9VsNj0gdp/khJFiExv631JSKg+dYGkMivUSm9gsDiE2raVS6RGbgqOO6cjbJVrY1tbX1xvgWZT++jUC9k/pwX5rc4CdxLXSwMhsctfr9SJ7QCKROMc+RV5kR4KOc/4/7YsRsvbnwATHutmaTXaeq6urV2C+CSp8wvwZn/ZjMpmYS0tLSXzAPoh+jF91IQVPdINldIx+ptIIKs9ncnXTaKHor9n+4/G4Cb3DeqWNXYooEJ6xAlJ/AH2088vCD+ZKAAAAAElFTkSuQmCC';
    
    urltoFile('data:text/plain;base64,' + base64image, 'hello.png','image/png')
    .then(function(file){ console.log(file);});

推荐阅读