如何将大型 base64 图像发送到 nodejs 服务器

Question

im using this function to convert html div to pdf, but i want to store it on the server so i can then attach it to an email and send it using nodmailer, now my problem is that i dont know how to store it on the server ,

前端是js后端是nodejs

非常感谢各种帮助

前端JS

    html2canvas($(".html-content")[0]).then(function (canvas) {
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
   }
        
        $.ajax({
           type: "post",
           url: "/receive",
           data: imgData,
        })
    
    });

后端nodejs

const express = require("express");
const router = require("express").Router();
router.use(express.json({limit: '50mb'}));
router.use(express.urlencoded({limit: '50mb', extended: true, parameterLimit: 50000}));


router.post('/receive', (req, res) => {
    
    console.log("my req body: ", req.body)
})

控制台日志

PayloadTooLargeError: request entity too large
    at readStream (C:\Users\user\Desktop\project\node_modules\raw-body\index.js:155:17)
    at getRawBody (C:\Users\user\Desktop\project\node_modules\raw-body\index.js:108:12)
    at read (C:\Users\user\Desktop\project\node_modules\body-parser\lib\read.js:77:3)
    at urlencodedParser (C:\Users\user\Desktop\project\node_modules\body-parser\lib\types\urlencoded.js:116:5)
    at Layer.handle [as handle_request] (C:\Users\user\Desktop\project\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\user\Desktop\project\node_modules\express\lib\router\index.js:317:13)
    at C:\Users\user\Desktop\project\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\Users\user\Desktop\project\node_modules\express\lib\router\index.js:335:12)
    at next (C:\Users\user\Desktop\project\node_modules\express\lib\router\index.js:275:10)
    at jsonParser (C:\Users\user\Desktop\project\node_modules\body-parser\lib\types\json.js:119:7)

编辑 1

设置contentType: "image/jpeg" ，在 ajax 上，去掉 payload too large 错误，但后端没有显示，

console.log("reqbody: " +  req.body)

output

reqbody: [object Object]

Answer 1

如果您想按照自己的方式进行操作（在客户端生成 pdf，然后将其发送到服务器以邮寄）

根据https://github.com/parallax/jsPDF/issues/3082

你可以把你的 pdf 放在像这样的变量中pdf.output()

但是你不应该把它放在查询中 - 把它放在有效负载中

就像是

$.ajax({
  type: "POST",
  url: url,
  data: pdf.output(),
  // dataType: dataType // don't know if you need this too so it doesn't think it's json
});

然后在服务器上接收它。 它不再出现在查询字符串中； 我认为您可以使用 express 的“正文解析器中间件”来获取播放负载。

---

但是，您确定要在客户端生成 pdf 并将其发送回服务器吗？ 用户可以拦截 ajax 请求并发送不同的 PDF... 这对于某些应用程序可能不是问题，但对其他应用程序可能是坏事。

对于大多数事情，我认为最好在服务器上生成 pdf，然后将其发送到浏览器以显示（使用 ajax 请求发送 Z437175BA4191210EE004E1D937494D09 的请求，同时从相反的方式发送邮件。

Answer 2

您使用canvas.toDataURL("image/jpeg", 1.0); ，但我建议使用canvas.toBlob进行编码，并在 ajax 调用中设置image/jpeg的实际contentType （而不是使用默认值，即application/x-www-form-urlencoded; charset=UTF-8 ），然后使用express.raw({ type: '*/*', limit: '50mb'})接收原始正文（或者您可以将更严格的类型设置为仅image/jpeg或image/*或任何最适合您的应用。）

在客户端：

$.ajax({
  type: "post",
  url: "/receive",
  data: imgData,
  contentType: "image/jpeg"
})

在您的服务器中：

app.use(express.raw({ type: '*/*', limit: '50mb' }));

传入的有效负载将在req.body作为Buffer 。