Express保存base64圖片

yuxue 發布于2019-08-20 14:14 / 623人閱讀

摘要：上傳圖片使用將本地圖片解析為格式使用作為載體將圖片數據傳到后臺獲取本地圖片將格式的圖片數據存到上傳圖片數據到后臺保存圖片信息使用解析表單引入解析表單將前臺傳來的數據去掉前綴寫入文件保存成功

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

    });

});

GPU云服務器云服務器 base64圖片生成 base64 base64數據 base64 cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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