資訊專欄INFORMATION COLUMN
摘要：上傳圖片使用將本地圖片解析為格式使用作為載體將圖片數(shù)據(jù)傳到后臺獲取本地圖片將格式的圖片數(shù)據(jù)存到上傳圖片數(shù)據(jù)到后臺保存圖片信息使用解析表單引入解析表單將前臺傳來的數(shù)據(jù)去掉前綴寫入文件保存成功
DOM
Javascript
使用 FileReader 將本地圖片解析為base64格式
使用 FormData 作為載體將base64圖片數(shù)據(jù)傳到后臺
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格式的圖片數(shù)據(jù)存到imgData
fileReader.addEventListener("onload", function(){
imgData = fileReader.result;
}
//Ajax上傳圖片數(shù)據(jù)到后臺
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數(shù)據(jù)去掉前綴
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("保存成功");
}
});
});
});
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81482.html
摘要：原文首發(fā)博主經(jīng)過實踐，這里給出兩種處理用戶上傳圖片的方法，前后端代碼皆有前端后端的中間件提交告訴不要去處理發(fā)送的數(shù)據(jù)告訴不要去設(shè)置請求頭后端代碼用初始化項目之后，新建一個路由文件路由設(shè)置上傳的圖片文件存放的地方為根目錄下的文件夾 原文首發(fā)：https://shuirong.github.io/博主經(jīng)過實踐，這里給出兩種處理用戶上傳圖片的方法，前后端代碼皆有． 1. 前端jQuery,后...
摘要：對于圖片上傳，大家一定不陌生。項目地址一環(huán)境搭建本項目使用目前最新的和進行開發(fā)，所以環(huán)境的搭建必不可少。在目錄下新建代碼內(nèi)容只有行，其輸入為一個圖片文件，輸出為一串編碼。同樣的方式，我們可以為也設(shè)置一個代理數(shù)組，以實現(xiàn)向外拋出數(shù)組的目的。 對于圖片上傳，大家一定不陌生。最近工作中遇到了關(guān)于圖片上傳的內(nèi)容，借此機會認真研究了一番，遂一發(fā)不可收拾，最后琢磨了一個東西出來。在開發(fā)的過程中有不...
摘要：為用戶提供授權(quán)以允許用戶操作非公開資源，有很多種方式。具體的代碼根據(jù)不同的授權(quán)方案而有所不同。使用授權(quán)原理利用來驗證用戶，有兩種機制實現(xiàn)。使用來實現(xiàn)用戶授權(quán)主要用于簽發(fā)如果有將異步的簽名。 ? 在很多應(yīng)用中，我們都需要向服務(wù)端提供自己的身份憑證來獲得訪問一些非公開資源的授權(quán)。比如在一個博客平臺，我們要修改自己的博客，那么服務(wù)端要求我們能夠證明 我是我 ，才會允許我們修改自己的...
閱讀 2642·2021-11-18 10:07
閱讀 1091·2021-08-03 14:04
閱讀 734·2019-08-30 13:08
閱讀 2588·2019-08-29 15:33
閱讀 1103·2019-08-29 14:07
閱讀 3002·2019-08-29 14:04
閱讀 1449·2019-08-29 11:19
閱讀 1155·2019-08-29 10:59
