http不使用Form表单发送文件数据和非文件数据(下载篇)

int64 发布于2019-08-01 15:50 / 951人阅读

摘要：本文主要在后端接收前端给的数据，前端的上传篇，查看对应的上传篇如果你想马上使用，那么你可以去中使用或者可以快速的解决你的问题，这里不使用包，完成下载的功能首先需要知道传过来的数据长什么样子，这个非常重要如果这里有疑问，你可以查看对应的上传篇

本文主要在后端接收前端给的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表单数据

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

转载请注明本文地址：https://www.ucloud.cn/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