你真的了解文件上传吗?

简介: 你真的了解文件上传吗?

大家都知道文件上传,通过nodejs获取的数据是非常困难的。


错误的上传处理


直接将请求体中的内容存入到本地文件中。


const http = require('http');
    const fs = require('fs');
    const server = http.createServer((req, res) => {
      let body = ""
      if (req.url === '/upload') {
        if (req.method === 'POST') {
          // const fileWriter = fs.createWriteStream('./foo.png', {flags: 'a+'});
          // req.pipe(fileWriter);
          req.on('data', (data) => {
            body += data
            // fileWriter.write(data);
          });
          req.on('end', () => {
            console.log(body)// 输出一大堆东西
            console.log("文件上传成功~");
            res.end("文件上传成功~");
          })
        }
      }
    });
    server.listen(8000, () => {
      console.log("文件上传服务器开启成功~");
    })


网络异常,图片无法展示
|


上面错误处理的原因是,将请求体中的内容都当成了该图片的内容,其实他还存在数据类型,上传的文件名,每个上传文件的分割内容。所以保存的文件是不正确的,不能打开的。


正确的上传处理


通过一步步的分割字符串,来截取正确的文件内容,然后再存入本地。


  • 在处理数据的时候一定要设置二进制编码req.setEncoding('binary'),不然截取文件存入后,会产生乱码导致文件出错。


  • querystring的parse方法,参数一:操作的字符串,参数二:字符串分割符,参数三:键值对分隔符。


  • 然后就是获取文件分隔符boundary。


网络异常,图片无法展示
|


  • 最后照着上图将括起来的部分删除即可。


const totalBoundary = req.headers['content-type'].split(';')[1];
  const boundary = totalBoundary.split('=')[1];


const http = require('http');
    const fs = require('fs');
    const qs = require('querystring');
    const server = http.createServer((req, res) => {
      if (req.url === '/upload') {
        if (req.method === 'POST') {
          req.setEncoding('binary');
          let body = '';
          const totalBoundary = req.headers['content-type'].split(';')[1];
          const boundary = totalBoundary.split('=')[1];
          req.on('data', (data) => {
            body += data;
          });
          req.on('end', () => {
            console.log(body);
            // 处理body
            // 1.获取image/png的位置
            const payload = qs.parse(body, "\r\n", ": ");
            const type = payload["Content-Type"];
            // 2.开始在image/png的位置进行截取
            const typeIndex = body.indexOf(type);
            const typeLength = type.length;
            let imageData = body.substring(typeIndex + typeLength);
            // 3.将中间的两个空格去掉
            imageData = imageData.replace(/^\s\s*/, '');
            // 4.将最后的boundary去掉
            imageData = imageData.substring(0, imageData.indexOf(`--${boundary}--`));
            fs.writeFile('./foo.png', imageData, 'binary', (err) => {
              res.end("文件上传成功~");
            })
          })
        }
      }
    });
    server.listen(8000, () => {
      console.log("文件上传服务器开启成功~");
    })


如你所见,争取的截取一个文件的内容是非常麻烦的,所以工作中我们一般会使用第三方库multer详细用法请访问这里


相关文章
|
7月前
|
C#
C#文件上传
C#文件上传
28 0
|
2月前
|
Java
Struts文件上传与下载详解 _上传多个文件
Struts文件上传与下载详解 _上传多个文件
19 0
|
8月前
|
JavaScript 前端开发 移动开发
浅谈文件上传
浅谈文件上传
浅谈文件上传
|
7月前
|
存储 移动开发 JavaScript
|
9月前
|
安全 应用服务中间件 PHP
[SUCTF 2019]CheckIn(文件上传)
[SUCTF 2019]CheckIn(文件上传)
66 0
|
11月前
|
前端开发 Java Apache
文件上传与下载
文件上传与下载 文件上传也称为upload,是指将本地图片、视频、音频等文件上传到服务器上,可以供其他用户浏览或下载的过程。文件上传在项目中应用非常广泛,我们经常发微博、发微信朋友圈都用到了文件上传功能。 文件上传时,对页面的form表单有如下要求: method=“post” 采用post方式提交数据 enctype=“multipart/form-data” 采用multipart格式上传文件 type=“file” 使用input的file控件上传
|
12月前
|
开发框架 安全 JavaScript
文件上传利用总结
文件上传利用总结
247 0
|
Java 开发者
单文件上传 | 学习笔记
快速学习单文件上传,介绍了单文件上传系统机制, 以及在实际应用过程中如何使用。
67 0
单文件上传 | 学习笔记