nodejs转发本地浏览器发送的请求 formdata里面多字段多文件上传 nodejs解析formdata中的文件

nodejs转发本地浏览器发送的请求

css

<style>

    .dropzone {
        width: 100%;
        height: 200px;
        border: 2px dashed #ddd;
        text-align: center;
        line-height: 200px;
        color: #999;
        margin-top: 5px;
    }

    .preview img {
        width: 50%;
        height: 60%;
    }

    .uploadBtn {
        text-align:center;
        border: 2px dashed #ddd;
        width: 100%;
        height: 25px;
    }

    .requestBtn {
        width: 60%;
        height: 120px;
        font-size: 45px;
    }

</style>
var foo = 'bar';

html

<div id="uploadBtn" class="uploadBtn">
   选择
    <input id="upload-input" style="position: absolute; width:100%; height: 25px; top: 10; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif, image/jpg, image/png" onchange="showImg(this)" multiple />
</div>

<div id="dropzone" class="dropzone">
    拖放
</div>

<div id="preview" class="preview"></div>

<div id="requestDiv" style="text-align: center; margin-top:10px; display: none;">
    <button id="requestBtn" class="requestBtn" onclick="requestCheck()">确认</button>
</div>

js 本段主要实现点击上传以及拖拽上传

    document.addEventListener('DOMContentLoaded', function() {

        const targetNode = document.getElementById('preview')
        const observer = new MutationObserver((mutationsList, observer) => {
            var images = document.getElementById('preview').getElementsByTagName("img")
            if(images.length >= 2){
                document.getElementById('uploadBtn').style.display = "none"
                document.getElementById('dropzone').style.display = "none"
                document.getElementById('requestDiv').style.display = "block"
            }
        })
        const config = {
            childList: true,
            attributes: true,
            subtree: true
        }
        observer.observe(targetNode, config)

    })

    async function showImg(obj) {
        var files = obj.files
        await handleFiles(files)
    }

    async function handleFiles(files) {
        var preview = document.getElementById('preview')
        for (var i = 0; i < files.length; i++) {
            var file = files[i]
            var imageType = /image.*/
            if (!file.type.match(imageType)) {
                continue
            }
            var img = document.createElement("img")
            img.file = file
            var reader = new FileReader()
            reader.onload = (function(aImg) {
                return function(e) {
                    aImg.src = e.target.result
                    preview.appendChild(aImg)
                }
            })(img)
            reader.onprogress = function (e) {
                console.log('アプロード進捗：' + (e.loaded / e.total * 100).toFixed(2)
                        + '%')
            }
            reader.readAsDataURL(file)
        }
    }

    var dropzone = document.getElementById('dropzone')

    dropzone.addEventListener('drop', async function (e) {
        await handleFiles(e.dataTransfer.files)
        e.preventDefault()
        e.stopPropagation()
    }, false)

    dropzone.addEventListener('dragover', function (e) {
        if (e.preventDefault) {
            e.preventDefault()
        }
        return false
    }, false)

读取html中的图片元素

读取上传的img，然后将img传参到请求方法中。

function requestCheck(){

        let images = document.getElementById('preview').getElementsByTagName("img");
        let image1 = images[0].file;
        let image2 = images[1].file;

        signatureCreat(image1,image2);
        
    }

这里是一个当前项目获取key的script，可跳过

通过这个方法拿了个字段用，直接看调用的getBizToken(signature,image1,image2);即可

function signatureCreat(image1,image2){

        let params = ''
        let xhr = new XMLHttpRequest();

        xhr.open('POST', 'https://www.face/webReg', true);

        xhr.onload = function () {
            if (this.status == 200 || this.status == 304) {
            let getResult = JSON.parse(this.response)
            let signature = getResult['faceid_signature'];
            getBizToken(signature,image1,image2);
            }
        };
        xhr.onerror = function (e) {
            console.log(e)
        };

        xhr.send(params);
    }

往服务端发送数据方法

function getBizToken(signature,image1,image2){

        let xhr = new XMLHttpRequest();
        var formData = new FormData();
        formData.append('sign', signature);
        formData.append('sign_version', "hmac_sha1");
        formData.append('liveness_type', "meglive");
        formData.append('uuid', "webDemo");
        formData.append('image_ref', image1);
        fetch('http://localhost:3000/send-data', {
          method: 'POST',
          body: formData
        })
        .then(response => response.json())
        .then(data => {
          console.log(data);
        })
        .catch(error => {
          console.error(error);
        });

nodejs接收并转发并返回请求到的数据

const express = require('express');
const axios = require('axios');
const multer = require('multer');

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'uploads/'); // 指定文件保存的目录，也可以不保存：
      // const storage = multer.memoryStorage();
      // const upload = multer({ storage: storage });
    },
    filename: function (req, file, cb) {
      cb(null, file.originalname); // 使用原始文件名作为保存的文件名
    }
  });
const upload = multer({ storage: storage,
    limits: {
        fieldSize: 10 * 1024 * 1024, // 限制每个字段的大小为10MB
        fileSize: 100 * 1024 * 1024, // 限制每个文件的大小为100MB
        fields: 10, // 限制每个请求中的字段数量为10个
        files: 5 // 限制每个请求中的文件数量为5个
      }
})

const FormData = require('form-data');
const app = express();

app.post('/send-data', upload.single('image_ref'), async (req, res) => {
  try {

    var formData = new FormData();
    formData.append('field', req.body.sign);
    formData.append('field1', "hmac_sha1");
    formData.append('field2', "meglive");
    formData.append('field3', "webDemo");

    let file= eq.file;
    formData.append('image_ref', file);

    // 将数据发送到其他服务器实例 
    const response= await axios.post('https://api-test/aaa', formData);

    // 返回其他服务器的响应给前端
    res.json(response.data);
    
  } catch (error) {
    res.status(500).json({ "error": error});
  }
});

多文件js

function compare(signature,bizToken,image1,image2){

        var formData = new FormData();
        formData.append('sign', signature);
        formData.append('sign_version', "hmac_sha1");
        formData.append('biz_token', bizToken);
        formData.append('image_ref', image1);
        formData.append('image1', image2);

        fetch('http://localhost:3000/compare', {
          method: 'POST',
          body: formData
        })
        .then(response => response.json())
        .then(data => {
          console.log(data);
        })
        .catch(error => {
          console.error(error);
        });

    }

多文件接收

app.post('/compare', upload.fields([{ name: 'image_ref' }, { name: 'image1' }]), async (req, res) => {
  try {
  
    const files = req.files;
    // console.log(files)
    // res.send(files['image_ref'][0]['filename'])
    var formData = new FormData();
    formData.append('sign', req.body.sign);
    formData.append('sign_version', "hmac_sha1");
    formData.append('biz_token', req.body.biz_token);

    var fileName = files['image_ref'][0]['filename'];
    var fileName1 = files['image1'][0]['filename'];
    formData.append('image_ref', fileName);
    formData.append('image1', fileName1 );

    // 将数据发送到其他服务器实例 
    const response = await axios.post('https://api-test', formData);

    res.json(response.data);
  } catch (error) {
    console.error(error);
    res.status(500).json({ "error": error });
  }
});

如果是同一个字段多个文件的话

js：

const formData = new FormData();
formData.append('images', file1);
formData.append('images', file2);

nodejis：

app.post('/upload', upload.array('images', 2), (req, res) => {
  try {
    const files = req.files;
    // 处理上传的文件
    console.log(files);

    res.status(200).json({ message: '文件上传成功' });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: '文件上传失败' });
  }
});