Express保存base64图片

yuxue 发布于2019-08-20 14:14 / 436人阅读

摘要：上传图片使用将本地图片解析为格式使用作为载体将图片数据传到后台获取本地图片将格式的图片数据存到上传图片数据到后台保存图片信息使用解析表单引入解析表单将前台传来的数据去掉前缀写入文件保存成功

DOM

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("保存成功");
            }
        });

    });

});

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81482.html

两种主流上传图片的方法：jQuery+Multer || 原生JS

摘要：原文首发博主经过实践，这里给出两种处理用户上传图片的方法，前后端代码皆有前端后端的中间件提交告诉不要去处理发送的数据告诉不要去设置请求头后端代码用初始化项目之后，新建一个路由文件路由设置上传的图片文件存放的地方为根目录下的文件夹原文首发：https://shuirong.github.io/博主经过实践，这里给出两种处理用户上传图片的方法，前后端代码皆有． 1. 前端jQuery,后...

cnTomato 2019-08-21 11:41 评论0 收藏0
用现代化的方式开发一个图片上传工具

摘要：对于图片上传，大家一定不陌生。项目地址一环境搭建本项目使用目前最新的和进行开发，所以环境的搭建必不可少。在目录下新建代码内容只有行，其输入为一个图片文件，输出为一串编码。同样的方式，我们可以为也设置一个代理数组，以实现向外抛出数组的目的。对于图片上传，大家一定不陌生。最近工作中遇到了关于图片上传的内容，借此机会认真研究了一番，遂一发不可收拾，最后琢磨了一个东西出来。在开发的过程中有不...

beanlam 2019-08-20 15:51 评论0 收藏0
JWT、OAuth 2.0、session 用户授权实战

摘要：为用户提供授权以允许用户操作非公开资源，有很多种方式。具体的代码根据不同的授权方案而有所不同。使用授权原理利用来验证用户，有两种机制实现。使用来实现用户授权主要用于签发如果有将异步的签名。在很多应用中，我们都需要向服务端提供自己的身份凭证来获得访问一些非公开资源的授权。比如在一个博客平台，我们要修改自己的博客，那么服务端要求我们能够证明我是我，才会允许我们修改自己的...

zhaot 2019-05-22 15:14 评论0 收藏0