suchen

Heim >Web-Frontend >js-Tutorial >Wie implementiert man einen mehrteiligen Upload in Node.js? Methodeneinführung

Wie implementiert man einen mehrteiligen Upload in Node.js? Methodeneinführung

青灯夜游
青灯夜游nach vorne
2022-07-29 20:22:171805Durchsuche

NodeWie implementiert man einen mehrteiligen Upload? Der folgende Artikel stellt Ihnen vor, wie Sie einen mehrteiligen Upload in Node.js implementieren. Ich hoffe, er wird Ihnen hilfreich sein!

Wie implementiert man einen mehrteiligen Upload in Node.js? Methodeneinführung

Das Hochladen großer Dateien nimmt viel Zeit in Anspruch und der Upload kann mittendrin fehlschlagen. Zu diesem Zeitpunkt müssen Front-End und Back-End zusammenarbeiten, um dieses Problem zu lösen.

Lösungsschritte:

  • Dateifragmentierung, wodurch die für jede Anfrage benötigte Zeit reduziert wird. Wenn eine Anfrage fehlschlägt, können Sie sie separat hochladen, anstatt von vorne zu beginnen.

  • Benachrichtigen Sie den Server, um die Dateifragmente zusammenzuführen

    • Kontrollieren Sie die Anzahl gleichzeitiger Anfragen, um einen Überlauf des Browserspeichers zu vermeiden.

    • Wenn eine Anfrage aus Netzwerk- oder anderen Gründen fehlschlägt, senden wir die Anfrage erneut.

Dateifragmentierung und -zusammenführung. In JavaScript das FIle-Objekt ist eine Unterklasse des „Blob“-Objekts. Dieses Objekt enthält einen wichtigen Methodenabschnitt, mit dem wir die Binärdatei wie folgt aufteilen können:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
</head>
<body>
    <input type="file" multiple="multiple" id="fileInput" />
    <button onclick="SliceUpload()">上传</button>  
    <script>
        function SliceUpload() {
            const file = document.getElementById('fileInput').files[0]
            if (!file) return

            // 文件分片
            let size = 1024 * 50; //50KB 50KB Section size
            let fileChunks = [];
            let index = 0;        //Section num
            for (let cur = 0; cur < file.size; cur += size) {
                fileChunks.push({
                    hash: index++,
                    chunk: file.slice(cur, cur + size),
                });
            }

            // 上传分片
            const uploadList = fileChunks.map((item, index) => {
                let formData = new FormData();
                formData.append("filename", file.name);
                formData.append("hash", item.hash);
                formData.append("chunk", item.chunk);
                return axios({
                    method: "post",
                    url: "/upload",
                    data: formData,
                });
            });
            await Promise.all(uploadList);

            // 所有分片上传完成，通知服务器合并分片
            await axios({
                method: "get",
                url: "/merge",
                params: {
                    filename: file.name,
                },
            });
            console.log("Upload to complete");
        }
    </script>
</body>
</html>
Parallelitätskontrolle

Wenn die Datei groß ist, werden die Abschnitte wie folgt aufgeteilt Es wird eine Menge geben, und der Browser wird in kurzer Zeit eine große Anzahl von Anforderungen initiieren, was zu einer Speichererschöpfung führen kann, sodass eine Parallelitätskontrolle erforderlich ist.

Hier kombinieren wir die Methode Promise.race(), um die Anzahl gleichzeitiger Anfragen zu steuern und einen Überlauf des Browserspeichers zu vermeiden. 
// 加入并发控制
async function SliceUpload() {
    const file = document.getElementById('fileInput').files[0]
    if (!file) return

    // 文件分片
    let size = 1024 * 50; //50KB 50KB Section size
    let fileChunks = [];
    let index = 0;        //Section num
    for (let cur = 0; cur < file.size; cur += size) {
        fileChunks.push({
            hash: index++,
            chunk: file.slice(cur, cur + size),
        });
    }

    let pool = []; //Concurrent pool
    let max = 3; //Maximum concurrency
    for (let i = 0; i < fileChunks.length; i++) {
        let item = fileChunks[i];
        let formData = new FormData();
        formData.append("filename", file.name);
        formData.append("hash", item.hash);
        formData.append("chunk", item.chunk);

        // 上传分片
        let task = axios({
            method: "post",
            url: "/upload",
            data: formData,
        });
        task.then(() => {
        // 从并发池中移除已经完成的请求
        let index = pool.findIndex((t) => t === task);
            pool.splice(index);
        });

        // 把请求放入并发池中，如果已经达到最大并发量
        pool.push(task);
        if (pool.length === max) {
            //All requests are requested complete
            await Promise.race(pool);
        }
    }

    // 所有分片上传完成，通知服务器合并分片
    await axios({
        method: "get",
        url: "/merge",
        params: {
            filename: file.name,
        },
    });
    console.log("Upload to complete");
}

Code wiederverwendbar machen

function SliceUpload() {
    const file = document.getElementById('fileInput').files[0]
    if (!file) return

    // 文件分片
    let size = 1024 * 50; // 分片大小设置
    let fileChunks = [];
    let index = 0;        // 分片序号
    for (let cur = 0; cur < file.size; cur += size) {
        fileChunks.push({
            hash: index++,
            chunk: file.slice(cur, cur + size),
        });
    }

    const uploadFileChunks = async function(list){
        if(list.length === 0){
            // 所有分片上传完成，通知如无
            await axios({
                method: &#39;get&#39;,
                url: &#39;/merge&#39;,
                params: {
                    filename: file.name
                }
            });
            console.log(&#39;Upload to complete&#39;)
            return
        }

        let pool = []       // 并发池
        let max = 3         // 最大并发数
        let finish = 0      // 完成数量
        let failList = []   // 失败列表
        for(let i=0;i<list.length;i++){
            let item = list[i]
            let formData = new FormData()
            formData.append(&#39;filename&#39;, file.name)
            formData.append(&#39;hash&#39;, item.hash)
            formData.append(&#39;chunk&#39;, item.chunk)
            
            let task = axios({
                method: &#39;post&#39;,
                url: &#39;/upload&#39;,
                data: formData
            })

            task.then((data)=>{
                // 从并发池中移除已经完成的请求
                let index = pool.findIndex(t=> t===task)
                pool.splice(index)
            }).catch(()=>{
                failList.push(item)
            }).finally(()=>{
                finish++
                // 如果有失败的重新上传
                if(finish===list.length){
                    uploadFileChunks(failList)
                }
            })
            pool.push(task)
            if(pool.length === max){
                await Promise.race(pool)
            }
        }
    }

    uploadFileChunks(fileChunks)
}

Serverschnittstellen-Implementierung
const express = require('express')
const multiparty = require('multiparty')
const fs = require('fs')
const path = require('path')
const { Buffer } = require('buffer')
// file path
const STATIC_FILES = path.join(__dirname, './static/files')
// Temporary path to upload files
const STATIC_TEMPORARY = path.join(__dirname, './static/temporary')
const server = express()
// Static file hosting
server.use(express.static(path.join(__dirname, './dist')))
// Interface for uploading slices
server.post('/upload', (req, res) => {
    const form = new multiparty.Form();
    form.parse(req, function(err, fields, files) {
        let filename = fields.filename[0]
        let hash = fields.hash[0]
        let chunk = files.chunk[0]
        let dir = `${STATIC_TEMPORARY}/${filename}`
        // console.log(filename, hash, chunk)
        try {
            if (!fs.existsSync(dir)) fs.mkdirSync(dir)
            const buffer = fs.readFileSync(chunk.path)
            const ws = fs.createWriteStream(`${dir}/${hash}`)
            ws.write(buffer)
            ws.close()
            res.send(`${filename}-${hash} Section uploaded successfully`)
        } catch (error) {
            console.error(error)
            res.status(500).send(`${filename}-${hash} Section uploading failed`)
        }
    })
})

//Merged slice interface
server.get('/merge', async (req, res) => {
    const { filename } = req.query
    try {
        let len = 0
        const bufferList = fs.readdirSync(`${STATIC_TEMPORARY}/${filename}`).map((hash,index) => {
            const buffer = fs.readFileSync(`${STATIC_TEMPORARY}/${filename}/${index}`)
            len += buffer.length
            return buffer
        });
        //Merge files
        const buffer = Buffer.concat(bufferList, len);
        const ws = fs.createWriteStream(`${STATIC_FILES}/${filename}`)
        ws.write(buffer);
        ws.close();
        res.send(`Section merge completed`);
    } catch (error) {
        console.error(error);
    }
})

server.listen(3000, _ => {
    console.log('http://localhost:3000/')
})

Weitere knotenbezogene Kenntnisse finden Sie unter:

nodejs-Tutorial!

Das obige ist der detaillierte Inhalt vonWie implementiert man einen mehrteiligen Upload in Node.js? Methodeneinführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript node.js 子类 接口 并发 JS 对象 promise
Stellungnahme：
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Erfahren Sie in einem Artikel mehr über den JavaScript-StackNächster Artikel：Erfahren Sie in einem Artikel mehr über den JavaScript-Stack

In Verbindung stehende Artikel

Mehr sehen