資訊專欄INFORMATION COLUMN
摘要：本文主要在后端接收前端給的數(shù)據(jù)，前端的上傳篇，查看對應(yīng)的上傳篇如果你想馬上使用，那么你可以去中使用或者可以快速的解決你的問題，這里不使用包，完成下載的功能首先需要知道傳過來的數(shù)據(jù)長什么樣子，這個非常重要如果這里有疑問，你可以查看對應(yīng)的上傳篇
本文主要在后端接收前端給的FormData數(shù)據(jù)，前端的上傳篇，查看對應(yīng)的上傳篇
如果你想馬上使用，那么你可以去npm中使用multer或者formidable可以快速的解決你的問題，這里不使用包，完成下載的功能
首先需要知道FormData傳過來的數(shù)據(jù)長什么樣子，這個非常重要,如果這里有疑問，你可以查看對應(yīng)的上傳篇
進入主題,直接給出代碼，需要引入fs和async包
app.post("/imageUpload", function(req, res, next) {
//這里req的編碼方式為二進制
req.setEncoding("binary");
var body = "";
var boundary = req.headers["content-type"].split("; ")[1].replace("boundary=", "");
req.on("data", function(chunk) {
body += chunk;
});
req.on("end", function(req, res, next) {
var that = this;
var file = body.split("--" + boundary);
//取數(shù)據(jù)
var i = 1;
async.eachSeries(file, function(current, callback) {
if (i < file.length - 1) {
var something = querystring.parse(file[i], "
", ": ");
if (something["Content-Type"]) {
//如果這里上傳的是文件
//這里先測試圖片
// 獲取圖片類型(如：image/gif 或 image/png))
var entireData = body.toString();
const fileName = something["Content-Disposition"].split("filename=")[1].replace(/"/g, "").trim();
var contentTypeRegex = /Content-Type: image/.*/;
const contentType = something["Content-Type"];
//獲取文件二進制數(shù)據(jù)開始位置，即contentType的結(jié)尾
var upperBoundary = entireData.indexOf(contentType) + contentType.length;
var shorterData = entireData.substring(upperBoundary);
// 替換開始位置的空格和結(jié)尾的空格
var binaryDataAlmost = shorterData.replace(/^ss*/, "").replace(/ss*$/, "");
// 去除數(shù)據(jù)末尾的額外數(shù)據(jù)，即: "--"+ boundary + "--"
var binaryData = binaryDataAlmost.substring(0, binaryDataAlmost.indexOf("--" + boundary + "--"));
// 保存文件
fs.writeFile(fileName, binaryData, "binary", function(err) {
console.log("圖片上傳完成");
});
} else {
//如果這里上傳的不是文件
var dataArray = file[i].split("name=")[1].replace(/"/g, "").split("
");
that.body[dataArray[0]] = dataArray[2]
}
i++;
}
callback(null);
}, function(err) {
console.log("req.body", that.body);
})
})
res.end("over!!over!!")
})
至此下載篇完結(jié)，
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50153.html
摘要：在最后也要添加一個分界，不一樣的是在分界的前后各加了兩個表示數(shù)據(jù)發(fā)送完畢。至此上傳篇結(jié)束了 這里要說一下，本篇我重點說的是上傳，至于下載，查看對應(yīng)的下載篇 在原來，文件的上傳是使用form表單去提交，有的時候為了上傳文件，還要專門為上傳文件寫一個form表單上傳文件，十分的麻煩，探索宇宙已經(jīng)很累了，哪有時間浪費?。?！^_^ 正式進入主題 先看看怎么從html頁面中發(fā)送文件，回答是：使用...
摘要：格式支持比鍵值對復雜得多的結(jié)構(gòu)化數(shù)據(jù)，這一點也很有用。例如下面這段代碼最終發(fā)送的請求是這種方案，可以方便的提交復雜的結(jié)構(gòu)化數(shù)據(jù)，特別適合的接口。 簡介 form的enctype屬性為編碼方式，常用有兩種：application/x-www-form-urlencoded和multipart/form-data，默認為application/x-www-form-urlencoded。 ...
摘要：在表單提交時，瀏覽器會自動進行一系列的校驗工作，沒有通過校驗的表單是無法提交到服務(wù)器的。而方法提交表單，會在請求中發(fā)送表單字段鍵值對。表單提交事件表單提交到服務(wù)器時，會觸發(fā)事件。 上一篇主要溫習了一下form表單的屬性和表單元素，這一片主要講解用JavaScript如何操作form。 表單操作 取值 用JavaScript操作表單，免不了會有取值賦值操作，比如有以下表單： ...
摘要：前言本期的主題是在中如何實現(xiàn)文件上傳。文件上傳解決方案目前比較主流的解決方案就是表單或者和表單來實現(xiàn)。文件上傳解決方案表單利用表單組件進行文件上傳是遠古時期就一直在用的方法而且還真經(jīng)久不衰，厲害了。 終于抽出時間來繼續(xù)更新自己的博客，最近忙得夠嗆...對于該系列博客不知道大家有沒有這樣的看法，對于React常見的基礎(chǔ)東西并沒有過多或者詳細列出，感覺有點不符合系列標題。的確，筆者一開始也...
閱讀 2764·2021-11-22 14:45
閱讀 914·2021-10-15 09:41
閱讀 1074·2021-09-27 13:35
閱讀 3696·2021-09-09 11:56
閱讀 2640·2019-08-30 13:03
閱讀 3203·2019-08-29 16:32
閱讀 3311·2019-08-26 13:49
閱讀 777·2019-08-26 10:35
