http不使用Form表單發送文件數據和非文件數據(下載篇)

int64 發布于2019-08-01 15:50 / 946人閱讀

摘要：本文主要在后端接收前端給的數據，前端的上傳篇，查看對應的上傳篇如果你想馬上使用，那么你可以去中使用或者可以快速的解決你的問題，這里不使用包，完成下載的功能首先需要知道傳過來的數據長什么樣子，這個非常重要如果這里有疑問，你可以查看對應的上傳篇

本文主要在后端接收前端給的FormData數據，前端的上傳篇，查看對應的上傳篇

如果你想馬上使用，那么你可以去npm中使用multer或者formidable可以快速的解決你的問題，這里不使用包，完成下載的功能

首先需要知道FormData傳過來的數據長什么樣子，這個非常重要,如果這里有疑問，你可以查看對應的上傳篇

進入主題,直接給出代碼，需要引入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);
    //取數據
    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"];

                //獲取文件二進制數據開始位置，即contentType的結尾
                var upperBoundary = entireData.indexOf(contentType) + contentType.length;
                var shorterData = entireData.substring(upperBoundary);

                // 替換開始位置的空格和結尾的空格
                var binaryDataAlmost = shorterData.replace(/^ss*/, "").replace(/ss*$/, "");

                // 去除數據末尾的額外數據，即: "--"+ 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!!")
})

至此下載篇完結，

GPU云服務器云服務器 form表單文件上傳讀取數據文件到表單 js js提交form表單數據 js清空form表單數據

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50153.html

http不使用Form表單發送文件數據和非文件數據(上傳篇)

摘要：在最后也要添加一個分界，不一樣的是在分界的前后各加了兩個表示數據發送完畢。至此上傳篇結束了這里要說一下，本篇我重點說的是上傳，至于下載，查看對應的下載篇在原來，文件的上傳是使用form表單去提交，有的時候為了上傳文件，還要專門為上傳文件寫一個form表單上傳文件，十分的麻煩，探索宇宙已經很累了，哪有時間浪費啊！！^_^ 正式進入主題先看看怎么從html頁面中發送文件，回答是：使用...

kidsamong 2019-08-01 15:50 評論0 收藏0
JS基礎篇--JS之表單提交時編碼類型enctype詳解

摘要：格式支持比鍵值對復雜得多的結構化數據，這一點也很有用。例如下面這段代碼最終發送的請求是這種方案，可以方便的提交復雜的結構化數據，特別適合的接口。簡介 form的enctype屬性為編碼方式，常用有兩種：application/x-www-form-urlencoded和multipart/form-data，默認為application/x-www-form-urlencoded。 ...

ad6623 2019-08-21 17:26 評論0 收藏0
form表單那點事兒(下) 進階篇

摘要：在表單提交時，瀏覽器會自動進行一系列的校驗工作，沒有通過校驗的表單是無法提交到服務器的。而方法提交表單，會在請求中發送表單字段鍵值對。表單提交事件表單提交到服務器時，會觸發事件。上一篇主要溫習了一下form表單的屬性和表單元素，這一片主要講解用JavaScript如何操作form。表單操作取值用JavaScript操作表單，免不了會有取值賦值操作，比如有以下表單： ...

jerryloveemily 2019-08-01 15:24 評論0 收藏0
[ 一起學React系列 -- 8 ] React中的文件上傳

摘要：前言本期的主題是在中如何實現文件上傳。文件上傳解決方案目前比較主流的解決方案就是表單或者和表單來實現。文件上傳解決方案表單利用表單組件進行文件上傳是遠古時期就一直在用的方法而且還真經久不衰，厲害了。終于抽出時間來繼續更新自己的博客，最近忙得夠嗆...對于該系列博客不知道大家有沒有這樣的看法，對于React常見的基礎東西并沒有過多或者詳細列出，感覺有點不符合系列標題。的確，筆者一開始也...

Travis 2019-08-23 12:35 評論0 收藏0