express+multer上傳圖片打開亂碼問題及解決
更新時(shí)間：2022年09月06日 09:45:26 作者：qq_40272176
這篇文章主要介紹了express+multer上傳圖片打開亂碼問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
express+multer上傳圖片打開亂碼
原因
由于使用multer處理上傳圖片時(shí)，multer存儲(chǔ)的是重命名的文件，文件并沒有后綴名導(dǎo)致文件無法在服務(wù)器直接打開，手動(dòng)加上后綴名就能打開文件。
如：
解決方法
引入fs模塊將文件重命名存儲(chǔ)即可，以下用單文件上傳為例：
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重命名文件，第一個(gè)參數(shù)為上傳文件絕對(duì)路徑，第二個(gè)參數(shù)為相對(duì)路徑
//第三個(gè)參數(shù)可選
fs.rename(req.file.path,`tmp/uploads/${req.file.filename}.${appendName}`,function (err) {
if (err) throw err
})
res.json({msg:'success'})
})
簡(jiǎn)單的node文件上傳下載及中文亂碼
1. 基于MEAN的技術(shù)棧
使用restful風(fēng)格的接口
2. 在前端代碼中放置文件上傳按鈕和處理表單數(shù)據(jù)
<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>
處理上傳文件，生成表單數(shù)據(jù)
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字段是獲取不到上傳文件的，或許可以通過設(shè)置bodyParser來處理，但我這里使用一個(gè)比較常見的庫(kù)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;
? ? ? // 保存數(shù)據(jù)
? ? ? 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. 處理上傳文件的亂碼
上傳的文件是一個(gè)中文的csv，解析時(shí)出現(xiàn)了亂碼，使用iconv-lite進(jìn)行轉(zhuǎn)換
npm install iconv-lite --save
import * as iconv from 'iconv-lite';
import * as Buffer from 'bufferhelper';
export default class IconvHelper {
? /**
? ?* 用于文件上傳的轉(zhuǎn)碼
? ?* @param fileStr
? ?* @returns {string}
? ?*/
? static iconv2utf8 = (fileStr) => {
? ? return iconv.decode(fileStr, 'gbk');
? }
? /**
? ?* 用于文件下載的轉(zhuǎn)碼
? ?* @param fileStr
? ?* @returns {NodeBuffer}
? ?*/
? static iconv2gbk = (fileStr) => {
? ? return iconv.encode(fileStr, 'gbk');
? }
}bufferhelper是一個(gè)buffer的增強(qiáng)類，但這里使用后并不能正確賦值，所以這里暫且沒有使用
對(duì)csv文件進(jìn)行解析，生成數(shù)組，下一步可以保存到數(shù)據(jù)庫(kù)
parseMark = (filePath) => {
? return new Promise((resolve, reject) => {
? ? // 讀取文件內(nèi)容
? ? fs.readFile(filePath, (error, data) => {
? ? ? if (error) {
? ? ? ? return reject(error);
? ? ? }
? ? ? const text = IconvHelper.iconv2utf8(data);
? ? ? const markList = [];
? ? ? // 將文件按行拆成數(shù)組
? ? ? 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格式，網(wǎng)上有說增加BOM頭，如下示：
const msExcelBuffer = Buffer.concat([
? new Buffer('\xEF\xBB\xBF', 'binary'),
? new Buffer(IconvHelper.iconv2gbk(content))
]);但實(shí)際并沒有起作用，最后只是簡(jiǎn)單的encode成gbk問題得到解決
res.end(IconvHelper.iconv2gbk(content));
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Node.js操作redis實(shí)現(xiàn)添加查詢功能
Redis 是一個(gè)基于內(nèi)存的鍵（key）值（value）類型的數(shù)據(jù)結(jié)構(gòu)存儲(chǔ)容器，它既可以完全工作在內(nèi)存中，也可以持久化存儲(chǔ)。當(dāng) Redis 工作于持久化模式時(shí)，可以將它當(dāng)作一個(gè)非關(guān)系型數(shù)據(jù)庫(kù)使用。2017-05-05
Nodejs使用dgram模塊創(chuàng)建UDP服務(wù)詳解
這篇文章主要為大家介紹了Nodejs使用dgram模塊創(chuàng)建UDP服務(wù)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Node.js中的緩存機(jī)制:原理與應(yīng)用詳解
本文將深入探討緩存機(jī)制在 Node.js 中的應(yīng)用,包括其原理、實(shí)現(xiàn)方式和最佳實(shí)踐,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了傻瓜式解讀koa中間件處理模塊koa-compose的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
node.js實(shí)現(xiàn)學(xué)生檔案管理
這篇文章主要為大家詳細(xì)介紹了node.js實(shí)現(xiàn)學(xué)生檔案管理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
從Node.js事件觸發(fā)器到Vue自定義事件的深入講解
這篇文章主要給大家介紹了關(guān)于從Node.js事件觸發(fā)器到Vue自定義事件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了node讀寫Excel操作,結(jié)合實(shí)例形式分析了node.js使用node-xlsx模塊模塊讀寫Excel的相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-11-11
這篇文章主要介紹了node內(nèi)置調(diào)試的方法，并把代碼做了分享，對(duì)此有需要的朋友可以參考學(xué)習(xí)下。2018-02-02
Node.js readline 逐行讀取、寫入文件內(nèi)容的示例
本篇文章主要介紹了Node.js readline逐行讀取、寫入文件內(nèi)容的示例，運(yùn)用readline逐行讀取的兩種實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家介紹了使用nodeAPI時(shí)遇到過異步問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01