1569044682 发表于 2022-8-13 11:29:35

nodejs如何接收大文件base64编码的图片呀

问题:前端需要上传500kb的base64编码,但是后端一直接收不到

报错:{message: 'request entity too large', expected: 319457, length: 319457, limit: 102400, type: 'entity.too.large'}
已经写了这两句,limit还是不变
app.use(bodyParser.json({ limit: '50mb' }));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));

前端的请求是

                // dataURL为500kb的图片编码
                var urlstr = "base64=" + dataURL
                $.ajax({
                  type: "POST",
                  url: BASE_REQ_URL + "/my/updateuserhead64",
                  data: urlstr,
                  dataType: "json",
                  processData: false,                                  // 不知道这两句要不要加
                  contentType: "application/json;",                // 不知道这两句要不要加
                  headers: {
                        'Authorization': localStorage.getItem('Authorization')
                  },
                  error: function(data) {
                        console.log('连接失败');
                  },
                  success: function(data, textStatus, Status) {
                        console.log(data);
                        if (data.status === 0) {} else {}
                  }
                })


后端是这样写的

const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
const app = express()
app.use(cors())
app.use(express.urlencoded({ extended: false }))
app.use('/upload', express.static('./upload')) // 托管静态资源文件

app.use(bodyParser.json({ limit: '50mb' }));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));

app.post('/my/updateuserhead64', function(req, res) {
    console.log(req.body) // 这里的输入一直为{}
})

要么报错 'request entity too large',要么req.body为{},不知道怎么回事

然后在浏览器看到的请求负载是有数据的,但是后端一直看不到,呜呜呜


一点点儿 发表于 2022-8-13 13:24:28

本帖最后由 一点点儿 于 2022-8-13 13:28 编辑

app.post('/upload', function(req, res){

//接收前台POST过来的base64

var imgData = req.body.imgData;

//过滤data:URL

var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");

var dataBuffer = new Buffer(base64Data, 'base64');

fs.writeFile("image.png", dataBuffer, function(err) {

if(err){

res.send(err);

}else{

res.send("保存成功!");

}

});

});

kogawananari 发表于 2022-8-13 14:25:48

jquery发请求实属没用的知识,不如原生fetch请求{:10_277:}

1569044682 发表于 2022-8-13 15:29:20

kogawananari 发表于 2022-8-13 14:25
jquery发请求实属没用的知识,不如原生fetch请求

又用原生js试了一下,服务器返回的数据是
{"expose":true,"statusCode":400,"status":400,"body":"base64=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB...
上传不成功

请求是这样写的// 原生js发送ajax请求
var urlstr = "base64=" + dataURL
                var url = BASE_REQ_URL + "/my/updateuserhead64"
                var data = urlstr
                var isAsync = true; // t:异步 f:同步
                var callback = function(res) {
                  console.log(res);
                }

                sendbase64(url, data, isAsync, callback)

                function sendbase64(url, data, isAsync, callback) {
                  var xhr = new XMLHttpRequest();
                  xhr.open('POST', encodeURI(url), isAsync);
                  xhr.setRequestHeader("Accept", "json");
                  xhr.setRequestHeader('Content-Type', "application/json; charset=utf-8");
                  xhr.setRequestHeader("OData-MaxVersion", "4.0");
                  xhr.setRequestHeader("OData-Version", "4.0");
                  // xhr.setRequestHeader("Prefer", "odata.include-annotations=*");

                  xhr.onreadystatechange = function() {
                        if (xhr.readyState == 4) {
                            if (xhr.status == 200 || xhr.status == 304) {
                              callback(xhr.responseText);
                            }
                        }
                  }
                  xhr.send(data);
                }

dataURL是"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA..............

kerln888 发表于 2022-8-13 17:48:59

{:10_245:}{:10_245:}学习了

kogawananari 发表于 2022-8-15 10:11:26

1569044682 发表于 2022-8-13 15:29
又用原生js试了一下,服务器返回的数据是
{"expose":true,"statusCode":400,"status":400,"body":"base6 ...

你Content-Type写的是"application/json" 但是传的不是json所以不行
我推荐用的是原生fetch而不是原生xhr xhr比jq海南用{:10_266:}

fetch('https://example.com/', {
method: 'POST',
body: JSON.stringify({base64:'xxxxxxx'}),
headers:new Headers({'Content-Type': 'application/json'})
});

页: [1]
查看完整版本: nodejs如何接收大文件base64编码的图片呀