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

1569044682

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

报错：{message: 'request entity too large', expected: 319457, length: 319457, limit: 102400, type: 'entity.too.large'}
已经写了这两句，limit还是不变

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

复制代码

前端的请求是

1. 
   
2.                 // dataURL为500kb的图片编码
   
3.                 var urlstr = "base64=" + dataURL
   
4.                 $.ajax({
   
5.                     type: "POST",
   
6.                     url: BASE_REQ_URL + "/my/updateuserhead64",
   
7.                     data: urlstr,
   
8.                     dataType: "json",
   
9.                     processData: false,                                      // 不知道这两句要不要加
   
10.                     contentType: "application/json;",                  // 不知道这两句要不要加
    
11.                     headers: {
    
12.                         'Authorization': localStorage.getItem('Authorization')
    
13.                     },
    
14.                     error: function(data) {
    
15.                         console.log('连接失败');
    
16.                     },
    
17.                     success: function(data, textStatus, Status) {
    
18.                         console.log(data);
    
19.                         if (data.status === 0) {} else {}
    
20.                     }
    
21.                 })

复制代码

后端是这样写的

1. 
   
2. const express = require('express')
   
3. const cors = require('cors')
   
4. const bodyParser = require('body-parser')
   
5. const app = express()
   
6. app.use(cors())
   
7. app.use(express.urlencoded({ extended: false }))
   
8. app.use('/upload', express.static('./upload')) // 托管静态资源文件
   
9. 
   
10. app.use(bodyParser.json({ limit: '50mb' }));
    
11. app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
    
12. 
    
13. app.post('/my/updateuserhead64', function(req, res) {
    
14.     console.log(req.body) // 这里的输入一直为{}
    
15. })

复制代码

要么报错 '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海南用

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

复制代码

;

跳转到最佳答案楼层

一点点儿

1. app.post('/upload', function(req, res){
   
2. 
   
3. //接收前台POST过来的base64
   
4. 
   
5. var imgData = req.body.imgData;
   
6. 
   
7. //过滤data:URL
   
8. 
   
9. var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
   
10. 
    
11. var dataBuffer = new Buffer(base64Data, 'base64');
    
12. 
    
13. fs.writeFile("image.png", dataBuffer, function(err) {
    
14. 
    
15. if(err){
    
16. 
    
17. res.send(err);
    
18. 
    
19. }else{
    
20. 
    
21. res.send("保存成功！");
    
22. 
    
23. }
    
24. 
    
25. });
    
26. 
    
27. });

复制代码

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...
上传不成功

请求是这样写的

1. // 原生js发送ajax请求
   
2. var urlstr = "base64=" + dataURL
   
3.                 var url = BASE_REQ_URL + "/my/updateuserhead64"
   
4.                 var data = urlstr
   
5.                 var isAsync = true; // t:异步 f:同步
   
6.                 var callback = function(res) {
   
7.                     console.log(res);
   
8.                 }
   
9. 
   
10.                 sendbase64(url, data, isAsync, callback)
    
11. 
    
12.                 function sendbase64(url, data, isAsync, callback) {
    
13.                     var xhr = new XMLHttpRequest();
    
14.                     xhr.open('POST', encodeURI(url), isAsync);
    
15.                     xhr.setRequestHeader("Accept", "json");
    
16.                     xhr.setRequestHeader('Content-Type', "application/json; charset=utf-8");
    
17.                     xhr.setRequestHeader("OData-MaxVersion", "4.0");
    
18.                     xhr.setRequestHeader("OData-Version", "4.0");
    
19.                     // xhr.setRequestHeader("Prefer", "odata.include-annotations=*");
    
20. 
    
21.                     xhr.onreadystatechange = function() {
    
22.                         if (xhr.readyState == 4) {
    
23.                             if (xhr.status == 200 || xhr.status == 304) {
    
24.                                 callback(xhr.responseText);
    
25.                             }
    
26.                         }
    
27.                     }
    
28.                     xhr.send(data);
    
29.                 }

复制代码

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

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

复制代码

;