你真的了解文件上传吗?

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

大家都知道文件上传,通过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详细用法请访问这里


相关文章
C#文件上传
C#文件上传
68 0
|
1月前
|
存储 PHP 文件存储
32 单文件上传
路老师分享PHP文件上传教程,涵盖配置php.ini、使用$_FILES变量和move_uploaded_file()函数等关键步骤,帮助你轻松实现单文件上传功能。纯干货,技术知识分享。
34 1
|
1月前
|
Java
smartupload文件上传!
使用 `smartupload.jar` 实现文件上传和下载。首先将 `smartupload.jar` 添加到项目中,然后创建上传页面,确保表单使用 `POST` 方法并设置 `enctype="multipart/form-data"`。接着在服务器端通过 `SmartUpload` 对象处理文件上传,保存文件到指定目录,并获取表单中的其他数据。最后,实现文件下载功能,设置响应头以触发浏览器下载文件。
59 0
|
7月前
|
JSON 数据格式
文件上传~~
文件上传~~
49 0
|
4月前
|
前端开发 JavaScript 数据库
多个文件上传
多个文件上传
36 0
|
JavaScript 前端开发 移动开发
浅谈文件上传
浅谈文件上传
浅谈文件上传
|
存储 移动开发 JavaScript
|
安全 应用服务中间件 PHP
[SUCTF 2019]CheckIn(文件上传)
[SUCTF 2019]CheckIn(文件上传)
200 0
|
开发框架 安全 JavaScript
文件上传利用总结
文件上传利用总结
380 0