当前位置：首页 > article >正文

前端使用fetch、axios提交FormData 后台使用Express fileupload、multer接收数据

article 2025/1/7 20:49:13

前端fetch+后台express-fileupload

Fetch，Web数据交互方式，提供了对Request和Response（以及其他与网络请求有关的）对象的通用定义，是XMLHttpRequest的一种替代方案，fetch不是ajax的进一步封装，而是原生js。

FormData，FormData对象代表了一个表单的键值对集合，它可以包含多个字段，并且可以包含文件数据。FormData通常用于通过AJAX（XMLHttpRequest或Fetch）发送数据，避免页面刷新。

express-fileupload，Express处理文件上传的中间件，将客户端上传的文件保存到服务器上，form表单：enctype="multipart/form-data"。

btoa（binary-to-ASCII）函数，将一个ASCII字符串编码成Base64字符串；btoa只支持ASCII字符，因此如果字符串包含非ASCII字符（如中文或表情符号等），则需要先将其转换为符合ASCII 字符集的格式（通常通过encodeURIComponent或其他编码方式）。

atob（ASCII-to-binary）函数，将一个Base64编码的字符串，解码为原始的ASCII字符串。

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FormData ==> fetch</title>
</head>
<body>
    <button onclick="doSubmit1()">提交</button>
    <script type="text/javascript">
        function doSubmit1(){
            let data = {
                id:'1',
                name:'测试名称',
                list:[
                    {
                        id:'001',
                        name:'测试001'
                    }
                ]
            };
            let formData = new FormData()
            formData.append('data1', 'string')
            formData.append('data2', JSON.stringify(data))
            const utf8String = encodeURIComponent(JSON.stringify(data));
            const base64Encoded = btoa(utf8String);
            formData.append('data3', base64Encoded)
            fetch('/api/demo/demo01', {
                method: 'POST',
                body: formData
            }).then(response => {
                if (response.ok) {
                    console.log('请求成功');
                } else {
                    console.log('请求失败');
                }
            }).catch(error => {
                console.error('请求错误:', error);
            });
        }
    </script>
</body>
</html>

后端代码

const express = require('express');
const router = express.Router();
const fileUpload = require('express-fileupload');
const atob = require('atob')

router.use(fileUpload({
    limits: { fileSize: 10 * 1024 * 1024 },
}));

/**
 * 上传
 */
router.post('/demo01',(req,res)=>{
    console.log("请求路径：", req.path);
    console.log("请求地址：", req.url);
    console.log('data1', req.body.data1);
    console.log('data2', typeof(req.body.data2),req.body.data2);
    console.log('data2 object', JSON.parse(req.body.data2));
    let base64Decode = atob(req.body.data3)
    console.log('data3 base64Decode',base64Decode);
    let data3 = decodeURIComponent(base64Decode);
    console.log('data3',data3);
    res.send({code:20000,msg:'ok'});
});

module.exports = router;

前端axios+后台express框架及multer

Axios，基于Promise 的HTTP 客户端，可以工作于浏览器中，也可以在node.js中使用。

Axios和Fetch，都是基于Promise的请求方式。axios是基于promise实现对ajax技术的一种封装，而ajax是基于JS的XMLHttpRequest对象的封装；fetch同样是基于promise，但不是对ajax的封装，fetch是JS的原生API，相较于axios对浏览器的性能有提升。

multer，一个用于处理Node.js中multipart/form-data表单数据上传的中间件，主要用于文件上传。它建立在Busboy之上，具有较高的处理效率。

Busboy，一个Node.js解析multipart/form-data请求的JavaScript库，主要用于处理文件上传和HTML表单。

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FormData ==> axios</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <button onclick="doSubmit1()">提交</button>
    <script type="text/javascript">
        function doSubmit1(){
            let data = {
                id:'1',
                name:'测试名称',
                list:[
                    {
                        id:'001',
                        name:'测试001'
                    }
                ]
            };
            let formData = new FormData()
            formData.append('data1', 'string')
            formData.append('data2', JSON.stringify(data))
            const utf8String = encodeURIComponent(JSON.stringify(data));
            const base64Encoded = btoa(utf8String);
            formData.append('data3', base64Encoded)
            axios.post('/api/example/example01',formData)
                .then(function (response) {
                    console.log(response);
                }).catch(function (error) {
                    console.log(error);
                });
        }
    </script>
</body>
</html>

后台代码

const express = require('express');
const router = express.Router();
const multer = require('multer');

// 设置存储配置
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'uploads/') // 确保这个文件夹已经存在
    },
    filename: function (req, file, cb) {
      cb(null, file.fieldname + '-' + Date.now())
    }
});
   
const upload = multer({ storage: storage });

// 处理 multipart/form-data
router.post('/example01', upload.single('file'), (req, res) => {
    console.log("请求路径：", req.path);
    console.log("请求地址：", req.url);
    console.log('data1', req.body.data1);
    console.log('data2', typeof(req.body.data2),req.body.data2);
    console.log('data2 object', JSON.parse(req.body.data2));
    let base64Decode = atob(req.body.data3)
    console.log('data3 base64Decode',base64Decode);
    let data3 = decodeURIComponent(base64Decode);
    console.log('data3',data3);
    res.send({code:20000,msg:'ok'});
    res.send({code:20000,msg:'ok'});
});

module.exports = router;

查看全文

http://www.kler.cn/a/468964.html