Express保存base64图片

DOM

<input type="file" name="image" accept="image/*">
<input type="submit" value="上传图片">

Javascript

  • 使用 FileReader 将本地图片解析为base64格式

  • 使用 FormData 作为载体将base64图片数据传到后台

var fileInput = document.getElementsByTagName('input')[0],
    submitButton = document.getElementsByTagName('input')[1];
var fileReader = new FileReader(),
    imgData;
    
    //获取本地图片
    fileInput.addEventListaner('change', function(){
        var file = fileInput.files[0];
        fileReader.readAsDataURL(file);
    }
    
    //将base64格式的图片数据存到imgData
    fileReader.addEventListener('onload', function(){
        imgData = fileReader.result;
    }
    
    //Ajax上传图片数据到后台
    function uploadImg(){
    
        //FormData保存图片信息
        var formData =  new FormData(),
            xhr = new XMLHttpRequest();
        
        formData.append('imgData', imgData);
        
        xhr.open('POST', '/uploadImage', true);
        xhr.send(formData);
    }
    
    submitButton.addEventListener('click', function(){
        uploadImg();
    }
    

Express

  • 使用Multipaty解析表单

var express = require('express');
var router = express.Router();
//引入Multiparty解析表单
var multiparty = require('multiparty');
var fs = require('fs');

router.post('/uploadImage', function(req, res){
    var form = new multiparty.Form();
    form.parse(req, function(err, fields, files){
        //将前台传来的base64数据去掉前缀
        var imgData = fields.imgData[0].replace(/^data:image\/\w+;base64,/, '');

        var dataBuffer = new Buffer(imgData, 'base64');
        //写入文件
        fs.writeFile('public/images/imge.png', dataBuffer, function(err){
            if(err){
                res.send(err);
            }else{
                res.send('保存成功');
            }
        });

    });

});

前端随笔
[链接]

前端工程师

1.8k 声望
139 粉丝
0 条评论
推荐阅读
人人都会写的3D小游戏
近期在尝试着学习写一些3D小游戏,分享一下成果。严格上说还算不上完整的游戏,感兴趣的朋友可以观摩一下。预览地址:[链接]git仓库:[链接]语言:TypeScript框架:Babylon准备在这里用到的唯一素材:小飞机 是在...

JesseLuo14阅读 4.7k评论 1

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木142阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6.1k评论 9

前端工程师

1.8k 声望
139 粉丝
宣传栏