建站
咨詢
售后
建站咨詢
新聞中心
一：開啟 Node.js 服務(wù)
開啟一個 Node.js 服務(wù)，指定路由 /upload/image 收到請求后調(diào)用 uploadImageHandler 方法，傳入 Request 對象。
- const http = require('http');
- const formidable = require('formidable');
- const fs = require('fs');
- const fsPromises = fs.promises;
- const path = require('path');
- const PORT = process.env.PORT || 3000;
- const server = http.createServer(async (req, res) => {
- if (req.url === '/upload/image' && req.method.toLocaleLowerCase() === 'post') {
- uploadImageHandler(req, res);
- } else {
- res.setHeader('statusCode', 404);
- res.end('Not found!')
- }
- });
- server.listen(PORT, () => {
- console.log(`server is listening at ${server.address().port}`);
- });
二：處理圖片對象
formidable 是一個用來處理上傳文件、圖片等數(shù)據(jù)的 NPM 模塊，form.parse 是一個 callback 轉(zhuǎn)化為 Promise 便于處理。
Tips：拼接路徑時使用 path 模塊的 join 方法，它會將我們傳入的多個路徑參數(shù)拼接起來，因為 Linux、Windows 等不同的系統(tǒng)使用的符號是不同的，該方法會根據(jù)系統(tǒng)自行轉(zhuǎn)換處理。
- const uploadImageHandler = async (req, res) => {
- const form = new formidable.IncomingForm({ multiples: true });
- form.encoding = 'utf-8';
- form.maxFieldsSize = 1024 * 5;
- form.keepExtensions = true;
- try {
- const { file } = await new Promise((resolve, reject) => {
- form.parse(req, (err, fields, file) => {
- if (err) {
- return reject(err);
- }
- return resolve({ fields, file });
- });
- });
- const { name: filename, path: sourcePath } = file.img;
- const destPath = path.join(__dirname, filename);
- console.log(`sourcePath: ${sourcePath}. destPath: ${destPath}`);
- await mv(sourcePath, destPath);
- console.log(`File ${filename} write success.`);
- res.writeHead(200, { 'Content-Type': 'application/json' });
- res.end(JSON.stringify({ code: 'SUCCESS', message: `Upload success.`}));
- } catch (err) {
- console.error(`Move file failed with message: ${err.message}`);
- res.writeHead(200, { 'Content-Type': 'application/json' });
- res.end(JSON.stringify({ code: 'ERROR', message: `${err.message}`}));
- }
- }
三：實(shí)現(xiàn) mv 方法
fs.rename 重命名文件
將上傳的圖片寫入本地目標(biāo)路徑一種簡單的方法是使用 fs 模塊的 rename(sourcePath, destPath) 方法，該方法會異步的對 sourcePath 文件做重命名操作，使用如下所示：
- const mv = async (sourcePath, destPath) => {
- return fsPromises.rename(sourcePath, destPath);
- };
cross-device link not permitted
在使用 fs.rename() 時還要注意 cross-device link not permitted 錯誤，參考 rename(2) — Linux manual page:
**EXDEV **oldpath and newpath are not on the same mounted filesystem. (Linux permits a filesystem to be mounted at multiple points, but rename() does not work across different mount points, even if the same filesystem is mounted on both.)
oldPath 和 newPath 不在同一掛載的文件系統(tǒng)上。(Linux 允許一個文件系統(tǒng)掛載到多個點(diǎn)，但是 rename() 無法跨不同的掛載點(diǎn)進(jìn)行工作，即使相同的文件系統(tǒng)被掛載在兩個掛載點(diǎn)上。)
在 Windows 系統(tǒng)同樣會遇到此問題，參考 http://errorco.de/win32/winerror-h/error_not_same_device/0x80070011/
winerror.h 0x80070011 #define ERROR_NOT_SAME_DEVICE The system cannot move the file to a different disk drive.(系統(tǒng)無法移動文件到不同的磁盤驅(qū)動器。)
此處在 Windows 做下復(fù)現(xiàn)，因為在使用 formidable 上傳文件時默認(rèn)的目錄是操作系統(tǒng)的默認(rèn)目錄 os.tmpdir()，在我的電腦上對應(yīng)的是 C 盤下，當(dāng)我使用 fs.rename() 將其重名為 F 盤時，就出現(xiàn)了以下報錯：
- C:\Users\ADMINI~1\AppData\Local\Temp\upload_3cc33e9403930347b89ea47e4045b940 F:\study\test\202366
- [Error: EXDEV: cross-device link not permitted, rename 'C:\Users\ADMINI~1\AppData\Local\Temp\upload_3cc33e9403930347b89ea47e4045b940' -> 'F:\study\test\202366'] {
- errno: -4037,
- code: 'EXDEV',
- syscall: 'rename',
- path: 'C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\upload_3cc33e9403930347b89ea47e4045b940',
- dest: 'F:\\study\\test\\202366'
- }
設(shè)置源路徑與目標(biāo)路徑在同一磁盤分區(qū)
設(shè)置上傳文件中間件的臨時路徑為最終寫入文件的磁盤分區(qū)，例如我們在 Windows 測試時將圖片保存在 F 盤下，所以設(shè)置 formidable 的 form 對象的 uploadDir 屬性為 F 盤，如下所示：
- const form = new formidable.IncomingForm({ multiples: true });
- form.uploadDir = 'F:\\'
- form.parse(req, (err, fields, file) => {
- ...
- });
這種方式有一定局限性，如果寫入的位置位于不同的磁盤空間該怎么辦呢?
可以看下下面的這種方式。
讀取-寫入-刪除臨時文件
一種可行的辦法是讀取臨時文件寫入到新的位置，最后在刪除臨時文件。所以下述代碼創(chuàng)建了可讀流與可寫流對象，使用 pipe 以管道的方式將數(shù)據(jù)寫入新的位置，最后調(diào)用 fs 模塊的 unlink 方法刪除臨時文件。
- const mv = async (sourcePath, destPath) => {
- try {
- await fsPromises.rename(sourcePath, destPath);
- } catch (error) {
- if (error.code === 'EXDEV') {
- const readStream = fs.createReadStream(sourcePath);
- const writeStream = fs.createWriteStream(destPath);
- return new Promise((resolve, reject) => {
- readStream.pipe(writeStream);
- readStream.on('end', onClose);
- readStream.on('error', onError);
- async function onClose() {
- await fsPromises.unlink(sourcePath);
- resolve();
- }
- function onError(err) {
- console.error(`File write failed with message: ${err.message}`);
- writeStream.close();
- reject(err)
- }
- })
- }
- throw error;
- }
- }
四：測試
方式一：終端調(diào)用
- curl --location --request POST 'localhost:3000/upload/image' \
- --form 'img=@/Users/Downloads/五月君.jpeg'
方式二：POSTMAN 調(diào)用
Reference
- https://github.com/andrewrk/node-mv/blob/master/index.js
- https://stackoverflow.com/questions/43206198/what-does-the-exdev-cross-device-link-not-permitted-error-mean/43206506#43206506
- https://nodejs.org/api/fs.html#fs_fs_rename_oldpath_newpath_callback
本文轉(zhuǎn)載自微信公眾號「 Nodejs技術(shù)棧 」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系 Nodejs技術(shù)棧公眾號。
網(wǎng)頁名稱：Node.js 小知識 — 實(shí)現(xiàn)圖片上傳寫入磁盤的接口
網(wǎng)站路徑：http://www.dlmjj.cn/article/djspecs.html
