express+multer上传图片打开乱码问题及解决

 更新时间:2022年09月06日 09:45:26   作者:qq_40272176  
这篇文章主要介绍了express+multer上传图片打开乱码问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

express+multer上传图片打开乱码

原因

由于使用multer处理上传图片时,multer存储的是重命名的文件,文件并没有后缀名导致文件无法在服务器直接打开,手动加上后缀名就能打开文件。

如:

multer文件乱码问题

解决方法

引入fs模块将文件重命名存储即可,以下用单文件上传为例:

const fs=require('fs')
router.post('/imageUpload',upload.single('avatar'),function (req, res) {
    console.log(req.file)
    //获取文件后缀名
    var appendName=req.file.originalname.split('.')[1]
    //fs重命名文件,第一个参数为上传文件绝对路径,第二个参数为相对路径
    //第三个参数可选
    fs.rename(req.file.path,`tmp/uploads/${req.file.filename}.${appendName}`,function (err) {
        if (err) throw err
    })
    res.json({msg:'success'})
})

简单的node文件上传下载及中文乱码

1. 基于MEAN的技术栈

使用restful风格的接口

2. 在前端代码中放置文件上传按钮和处理表单数据

<div class="upload-file btn btn-sm btn-primary mb-2">
  <span><i class="fa fa-upload"></i> Upload</span>
  <input type="file" class="btn btn-sm btn-primary mb-2" (change)="fileChange($event, topic)" placeholder="Upload file" accept=".csv,.xls">
</div>

处理上传文件,生成表单数据 

fileChange(event, topic) {
  this.topic = topic;
  const fileList: FileList = event.target.files;
  const file: File = fileList[0];
  const formData: FormData = new FormData();
  formData.append('_id', topic._id);
  formData.append('file', file, file.name);
  this.topicService.uploadMark(formData).subscribe((res) => {
    this.topic.marks = res;
    this.toast.setMessage('item import successfully.', 'success');
  }, error => console.log(error));
}
uploadMark(fileData: FormData): Observable<any> {
  return this.http.post('/api/upload', fileData);
}

3. 后端接收上传文件

文件上传的router

export default function setRoutes(app) {
  const router = express.Router();
// file uplaod
router.route('/upload').post(uploadCtrl.uploadFile);
// Apply the routes to our application with the prefix /api
app.use('/api', router);
}

在路由中,req的file字段是获取不到上传文件的,或许可以通过设置bodyParser来处理,但我这里使用一个比较常见的库multer。

npm install multer --save
import * as path from 'path';
import * as multer from 'multer';
import TopicService from '../services/topic';
export default class UploadCtrl {
  uploadFile = (req, res) => {
    const topicService = new TopicService();
    // 获取上传文件
    const uploading = multer({
      dest: path.join(__dirname, '../public/uploads'),
    }).single('file'); // 这里的file是formData.append('file', file, file.name)里的名称
    uploading(req, res, (err) => {
      if (err) {
        return console.error(err);
      }
      const topicId = req.body._id;
      const uploadFile = req.file;
      // 保存数据
      const save = async () => {
        const markList = await topicService.parseMark(uploadFile.path);
        const db = await topicService.saveDB(topicId, markList);
        return {
          markList: markList,
          db: db,
        };
      };
      save().then((result) => {
        res.status(200).json(result.markList);
      }, error => {
        console.error(error);
      });
    });
  }
}

4. 处理上传文件的乱码

上传的文件是一个中文的csv,解析时出现了乱码,使用iconv-lite进行转换

npm install iconv-lite --save
import * as iconv from 'iconv-lite';
import * as Buffer from 'bufferhelper';
export default class IconvHelper {
  /**
   * 用于文件上传的转码
   * @param fileStr
   * @returns {string}
   */
  static iconv2utf8 = (fileStr) => {
    return iconv.decode(fileStr, 'gbk');
  }
  /**
   * 用于文件下载的转码
   * @param fileStr
   * @returns {NodeBuffer}
   */
  static iconv2gbk = (fileStr) => {
    return iconv.encode(fileStr, 'gbk');
  }
}

bufferhelper是一个buffer的增强类,但这里使用后并不能正确赋值,所以这里暂且没有使用

对csv文件进行解析,生成数组,下一步可以保存到数据库

parseMark = (filePath) => {
  return new Promise((resolve, reject) => {
    // 读取文件内容
    fs.readFile(filePath, (error, data) => {
      if (error) {
        return reject(error);
      }
      const text = IconvHelper.iconv2utf8(data);
      const markList = [];
      // 将文件按行拆成数组
      text.split(/\r?\n/).forEach((line, index) => {
        const arr = line.split(',');
        if (index > 0 && arr[0]) {
          markList.push({
            userId: arr[0],
            username: arr[1],
            donePageCount: arr[2],
            areaCount: arr[4],
            name: arr[6],
          });
        }
      });
      resolve(markList);
    });
  });
}

5. 下载文件

res.setHeader('Content-disposition', `attachment; filename='${result.name}-member.csv'`);
res.setHeader('Content-type', 'text/csv; charset=GBK');
res.end(IconvHelper.iconv2gbk(content));

6. 处理下载文件的乱码

由于node.js只支持'ascii', 'utf8', 'base64', 'binary'的编码方式,不支持MS的utf8 + BOM格式,网上有说增加BOM头,如下示:

const msExcelBuffer = Buffer.concat([
  new Buffer('\xEF\xBB\xBF', 'binary'),
  new Buffer(IconvHelper.iconv2gbk(content))
]);

但实际并没有起作用,最后只是简单的encode成gbk问题得到解决

res.end(IconvHelper.iconv2gbk(content));

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 使用NODE.JS创建一个WEBSERVER(服务器)的步骤

    使用NODE.JS创建一个WEBSERVER(服务器)的步骤

    在 node.js 中创建一个服务器非常简单,只需要使用 node.js 为我们提供的 http 模块及相关 API 即可创建一个麻雀虽小但五脏俱全的web 服务器,相比 Java/Python/Ruby 搭建web服务器的过程简单的很。本文简单的讲解下实现步骤
    2021-06-06
  • node中使用es5/6以及支持性与性能对比

    node中使用es5/6以及支持性与性能对比

    本篇文章主要介绍了node中使用es5/6以及支持性与性能对比,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • node.js中get和post接口教程

    node.js中get和post接口教程

    这篇文章主要介绍了node.js中get和post接口学习,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-05-05
  • 基于websocket实现简单聊天室对话

    基于websocket实现简单聊天室对话

    这篇文章主要为大家详细介绍了基于websocket实现简单聊天室对话,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • 解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题

    解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题

    这篇文章主要介绍了解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306报错的相关资料,文中将问题描述的很清楚,解决的方法也介绍的很完整,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-03-03
  • NodeJS学习笔记之Http模块

    NodeJS学习笔记之Http模块

    这里只是熟悉nodejs中的http模块的API,一般在开发过程中使用的是第三方的框架,比如说Express。其中封装了更为简单的构建http服务器的API。
    2015-01-01
  • 在Linux上用forever实现Node.js项目自启动

    在Linux上用forever实现Node.js项目自启动

    在一台计算机上手动跑Node项目简单,node xx.js就搞定了,想让Node项目后台运行,虽然不能直接用node命令搞定,但是在安装了forever这个包以后,还是很轻松的。不过要是在远程服务器上构建Node项目,如果没法自启动,一旦服务器重启,那就麻烦了。
    2014-07-07
  • 解决npm run serve启动报错npm ERR Missing script:"serve"

    解决npm run serve启动报错npm ERR Missing script:"serve&q

    这篇文章主要给大家介绍了关于解决npm run serve启动报错npm ERR Missing script:"serve"的相关资料,这是最近开发中遇到的一个问题,文中通过图文将解决办法介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • nodejs基于WS模块实现WebSocket聊天功能的方法

    nodejs基于WS模块实现WebSocket聊天功能的方法

    这篇文章主要介绍了nodejs基于WS模块实现WebSocket聊天功能的方法,结合实例形式分析了nodejs使用WS模块进行WebSocket通信实现聊天功能的具体操作技巧,需要的朋友可以参考下
    2018-01-01
  • nodejs body-parser 解析post数据实例

    nodejs body-parser 解析post数据实例

    下面小编就为大家带来一篇nodejs body-parser 解析post数据实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论