Node.js express框架多文件上传、拖拽、剪切板、webSocket文件上传

大家早上好，我是秀菜今天继续带来2种文件上传

1.formData多文件、拖拽、剪切板

var express = require('express');
var router = express.Router();
var multer = require('multer');
var path = require('path');


// 多文件上传/拖拽上传/剪切板上传
const storage = multer.diskStorage({
    destination: 'upload',
    filename(req, file, cb) {
        // 获取文件名后缀
        const ext = path.extname(file.originalname);
        // 随机生成文件名
        const uniqueSuffix = Date.now() + '_' + Math.round(Math.random() * 1e9);
        const fileName = `${uniqueSuffix} + ${ext}`;
        cb(null, fileName)
    }
})

// 多文件上传/拖拽上传
const upload = new multer({ storage })
router.post("/upload", upload.array('files'), (req, res) => {
    const files = req.files
    const name = req.body.name
    const email = req.body.email
    console.log(files, name, email);
    if (!files) {
        res.send('File not found')
        return;
    }
    res.send('文件上传成功')
})


module.exports = router;

2.webSocket文件上传

var express = require('express');
// webSocket文件上传
const WebSocket = require('ws');
const fs = require('fs');
const wss = new WebSocket.Server({ port: 3001 });

// 初始websocket文件上传
// wss.on('connection', (ws) => {
//   ws.on('message', (message) => {
//     const fileData = message;
//     const uniqueSuffix = Date.now() + '_' + Math.round(Math.random() * 1e9);
//     fs.writeFile(`./upload/${uniqueSuffix}.png`, fileData, (err) => {
//       if (err) {
//         console.log(err);
//       } else {
//         console.log('文件上传成功');
//       }
//     })
//   })
// })

// websocket文件后缀动态上传
// wss.on('connection', (ws) => {
//     ws.on('message', (message) => {
//         const fileInfo = JSON.parse(message);
//         const fileData = fileInfo.data;
//         // 现在，反转过程以获取原始的 Uint8Array
//         const reversedUint8Array = stringToUint8Array(fileData);

//         const uniqueSuffix = Date.now() + '_' + Math.round(Math.random() * 1e9);
//         const fileName = `${uniqueSuffix}.${fileInfo.name.split('.')[1]}`
//         fs.writeFile(`./upload/${fileName}`, reversedUint8Array, (err) => {
//             if (err) {
//                 console.log(err);
//             } else {
//                 console.log('文件上传成功');
//             }
//         })
//     })
// })

// function stringToUint8Array(str) {
//     const charArray = str.split('').map(char => char.charCodeAt(0));
//     return new Uint8Array(charArray);
// }


// websocket文件分段上传接口
// wss.on('connection', (ws) => {
//     let fileName = ''; //保存文件名称
//     let totalChunks = 0;  // 总快数
//     let receivedChunks = 0;    // 已接收到的块数
//     let writableStream = null;    // 可写流用于写入文件
//     ws.on('message', (message) => {
//         if (Buffer.isBuffer(message)) {
//             // fileName等于空数据的时候就代表没有传入数据
//             if (fileName === '') {
//                 const metaBuffer = message.toString();
//                 const meta = JSON.parse(metaBuffer);

//                 // 提取文件名和总块数
//                 fileName = meta.fileName;
//                 totalChunks = meta.totalChunks;
//                 // 创建可写流，用于写入文件
//                 writableStream = fs.createWriteStream(`./upload/${fileName}`)
//             } else {
//                 // 将文件块数据写入可写流
//                 writableStream.write(message);
//                 receivedChunks++;
//                 console.log(receivedChunks);
//                 if (receivedChunks === totalChunks) {
//                     // 关闭可写流保存文件
//                     writableStream.end();
//                     console.log(`文件保存成功:${fileName}`);
//                     writableStream = null;
//                     // 重设相关变量
//                     fileName = '';
//                     totalChunks = 0;
//                     receivedChunks = 0;
//                 }
//             }
//         }
//     })
//     ws.on('error', (error) => {
//         console.error('WebSocket 错误:' + error);
//         // 如果可写流存在，则关闭可写流
//         if (writableStream) {
//             writableStream.end();
//             writableStream = null;
//         }
//     })
// })


// 文件分段上传进度条展示接口
// wss.on('connection', (ws) => {
//     let fileName = ''; //保存文件名称
//     let totalChunks = 0;  // 总快数
//     let receivedChunks = 0;    // 已接收到的块数
//     let writableStream = null;    // 可写流用于写入文件
//     ws.on('message', (message) => {
//       if (Buffer.isBuffer(message)) {
//         // fileName等于空数据的时候就代表没有传入数据
//         if (fileName === '') {
//           const metaBuffer = message.toString();
//           const meta = JSON.parse(metaBuffer);
  
//           // 提取文件名和总块数
//           fileName = meta.fileName;
//           totalChunks = meta.totalChunks;
//           // 创建可写流，用于写入文件
//           writableStream = fs.createWriteStream(`./upload/${fileName}`)
//         } else {
//           // 将文件块数据写入可写流
//           writableStream.write(message);
//           receivedChunks++;
  
//           // 进度设置
//           let progress = 0;
  
//           console.log(receivedChunks);
//           if (receivedChunks === totalChunks) {
//             // 关闭可写流保存文件
//             writableStream.end();
//             console.log(`文件保存成功:${fileName}`);
//             writableStream = null;
//             // 重设相关变量
//             fileName = '';
//             totalChunks = 0;
//             receivedChunks = 0;
//             progress = 100;
//           } else {
//             progress = Math.floor((receivedChunks / totalChunks) * 100);
//           }
//           ws.send(JSON.stringify({ type: 'progress', progress }))
//         }
//       }
//     })
//     ws.on('error', (error) => {
//       console.error('WebSocket 错误:' + error);
//       // 如果可写流存在，则关闭可写流
//       if (writableStream) {
//         writableStream.end();
//         writableStream = null;
//       }
//     })
//   })

module.exports = router;