如何将大型 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,

frontEnd is js backEnd is nodejs

all kind of help is appreciated so much

FRONT END JS

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

BACKEND 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)
})

CONSOLE LOG

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)

EDIT 1

setting a contentType: "image/jpeg" , on ajax, gets rid of payload too large error, but nothing is displayed on the back end,

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

output

reqbody: [object Object]

Answer 1

If you want to do it the way you are doing it (generating a pdf on the client and then sending it to the server to mail)

according to https://github.com/parallax/jsPDF/issues/3082

you can put your pdf in a variable like this pdf.output()

but then you should not put it in the query - put it in the payload

something like

$.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
});

and then to receive it on the server. It won't be in the query string anymore; I think you can use express's "body parser middleware" to get the playload.

---

However, are you sure that you want to generate the pdf on the client and send it back to the server? A user could intercept the ajax request and send a different PDF... which might not be an issue for some applications, but could be bad for others.

For most things I think it would be better to generate the pdf on the server and then send it to the browser to show (using an ajax request that sends the pdf the opposite way from what you have) and mail it at the same time.

Answer 2

You encoded the canvas as a jpeg using canvas.toDataURL("image/jpeg", 1.0); , but I would suggest encoding using canvas.toBlob and setting an actual contentType of image/jpeg in the ajax call (instead of using the default , which is application/x-www-form-urlencoded; charset=UTF-8 ) and then receive the raw body using express.raw({ type: '*/*', limit: '50mb'}) (or you can set a more restrictive type to just image/jpeg or image/* or whatever is most appropriate for your application.)

In the client:

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

And in your server:

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

The incoming payload will be in req.body as a Buffer .