[已解决]nodejs如何接收大文件base64编码的图片呀

1569044682

问题：前端需要上传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为{}，不知道怎么回事

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

最佳答案

月排行榜 / 总排行榜

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海南用

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

;

跳转到最佳答案楼层

一点点儿

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

jquery发请求实属没用的知识，不如原生fetch请求

1569044682

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

学习了

kogawananari

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

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

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

;