nodejs接收FormData原生實現(xiàn)上傳下載

nodejs環(huán)境下接收FormData數(shù)據(jù)的模塊居多,但是正常原生是如何實現(xiàn)的?

模塊實現(xiàn)轉(zhuǎn)FormData的大多用的有 : multer、connect-multiparty等等

然而,搜索到的原生實現(xiàn)甚少。

下面代碼即為nodejs原生實現(xiàn)接收post傳參從formData里取值

前端代碼 -> axios react

      /* 前端使用 axios react */
           var files = new FormData()  //實例formdata
            files.append('file',this.refs.file.files[0]) //添加要上傳的文件  無關類型
            Axios.post('/upload/file',files,config )  //接口post 發(fā)送請求 附送 上傳文件 file
            .then((res)=>{
                console.log(res.data)  // 上傳成功返回
                this.setState({img:`https://${res.data.data.Location}`})
            })
            .catch(err => {
                console.log(err)  // 上傳失敗 錯誤 返回
            })
FormData

如圖,數(shù)據(jù)請求時FormData是這樣的,那么我們就需要拿到這些數(shù)據(jù)給他截取出來相應的數(shù)據(jù)

實際操作——nodejs 代碼

let uuid = () => {  //生成uuid方法
    let s = [];
    let hexDigits = "0123456789abcdef";
    for (let i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = "-";

    let uuid = s.join("");
    return uuid;
}

router.post('/file', (req, res, next) => {  //post請求  我這邊用的是express router 
    req.setEncoding('binary');
    let body = '';   // 文件數(shù)據(jù)
    // 邊界字符串
    let boundary = req.headers['content-type'].split('; ')[1].replace('boundary=', '');

    //接收post如data 流 buffer
    req.on('data', function (d) {
        body += d;
    });

    req.on('end', function () {
        let file = querystring.parse(body, '\r\n', ':');
        let fileInfo = file['Content-Disposition'].split('; ');
        let fileName = '';
        let ext = '';
        for (let value in fileInfo) {
            if (fileInfo[value].indexOf("filename=") != -1) {
                fileName = fileInfo[value].substring(10, fileInfo[value].length - 1);

                if (fileName.indexOf('\\') != -1) {
                    fileName = fileName.substring(fileName.lastIndexOf('\\') + 1);
                }
                ext = fileName.substr(fileName.indexOf('.') + 1, fileName.length);
            }
        }

        let upperBoundary = body.toString().indexOf(file['Content-Type'].substring(1)) + file['Content-Type'].substring(1).length;

        let binaryDataAlmost = body.toString().substring(upperBoundary).replace(/^\s\s*/, '').replace(/\s\s*$/, '');

         // 上傳文件重命名
        let uuidFileName = `${uuid()}.${ext}` 
        //上傳文件 本地存放地址
        let uploadDirFile = `./${uuidFileName}` 

        //創(chuàng)建文件流
        let writerStream = fs.createWriteStream(uploadDirFile);

        //開始 —— 寫入文件到本地
        writerStream.write(binaryDataAlmost.substring(0, binaryDataAlmost.indexOf(`--${boundary}--`)), 'binary'); 
        //寫入完成
        writerStream.end();
        writerStream.on('finish', function () {
            console.log("寫入完成。");
            //刪除剛剛創(chuàng)建好的本地文件 -> 只有在把文件存起來的時候需要刪除掉本地,否則不要用。
            fs.unlinkSync(uploadDirFile) 
            res.send({ data: data, code: 0, msg: 'ok' })
        });
    });
})

相對簡單吧
直接復制粘貼即可用。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容