带有 XMLHttpRequest() 的 formData POST 请求不起作用，但在邮递员中工作答案

【问题标题】：formData POST request with XMLHttpRequest() not working, but working in postman带有 XMLHttpRequest() 的 formData POST 请求不起作用，但在邮递员中工作
【发布时间】：2021-09-14 17:51:10
【问题描述】：

我一直在尝试发出将图像上传到 MongoDB 的 POST 请求。图片是dataUrl类型的，截图的时候会显示在我chrome的“网络”标签中。

我的服务器端功能工作正常，因为我尝试使用邮递员发出帖子请求，并且图像上传没有问题。但是使用代码，它似乎不起作用。

script.js

function takeScreenshot(video){

    SScanvas.getContext('2d').drawImage(video,0,0)
    let dataUrl = SScanvas.toDataURL('image/png');
    img.src = dataUrl;
    var hrefElement = document.createElement('a');
    hrefElement.href = dataUrl;
    document.body.append(hrefElement);
    /*
    hrefElement.download =  caughtNum + ' Time' + '.png';
    hrefElement.click();
    hrefElement.remove();
    */
    caughtNum++;

    //var base64img = dataUrl.replace(/^data:image\/(png|jpg);base64,/, "");

    postDB(dataUrl);
   
 }

function postDB(imageURL){
 
     var formData = new FormData();
     var img = imageURL; 
     var blob = new Blob([img], { type: "image/png"});
     formData.append("screenshot", blob);
     
     var request = new XMLHttpRequest();
  
     request.open("POST", "/api/employee/store");
     request.setRequestHeader("Content-Type", "multipart/form-data; boundary=<calculated when request is sent>");
     request.send(formData);

}

服务器端路由器.js

const express = require('express')
const router = express.Router()


const EmployeeController = require('../controllers/EmployeeController')
const upload = require('../middleware/upload')

router.get('/', EmployeeController.index)
router.post('/show', EmployeeController.show)
router.post('/store', upload.single('screenshot'), EmployeeController.store)
router.post('/update', EmployeeController.update)
router.post('/delete', EmployeeController.destroy)

module.exports = router

EmployeeController.js

//Function to store employee details
const store = (req,res,next) =>{

    let employee = new Employee({
        name : req.body.name,
        designation: req.body.designation,
        email : req.body.email,
        created : myDate,
        age : req.body.age
    })

    if(req.file){
        employee.screenshot = req.file.path
    }

    employee.save()

    .then(response=>{
        res.json({
            message : response 
        })
    })

    .catch(error=>{
        res.json({
            message : "An error has occured!"
        })
    })
}

【问题讨论】：

标签： javascript node.js mongodb blob

【解决方案1】：

request.setRequestHeader("Content-Type", "multipart/form-data; boundary=<calculated when request is sent>");

在发送请求时不计算，因为您已明确设置。

删除该行，以便自动计算。

【讨论】：

好的，删除后blob内容上传，但不是图片。我尝试从 takeScreenshot() 传递 base 64 图像，但没有成功。