帶有 XMLHttpRequest() 的 formData POST 請求不起作用，但在郵遞員中工作

Question

我一直在嘗試發出將圖像上傳到 MongoDB 的 POST 請求。 圖像是 dataUrl 類型的，截取屏幕截圖時，它會顯示在我的 chrome 中的“網絡”選項卡中。

我的服務器端功能工作正常，因為我已經嘗試使用郵遞員發出帖子請求，並且圖像上傳沒有問題。 但是使用代碼，它似乎不起作用。

腳本.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);

}

服務器端 router.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

員工控制器.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!"
        })
    })
}

Answer 1

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

發送請求時不會計算它，因為您已明確設置它。

刪除該行，以便可以自動計算。