时间戳

首页 > 解决方案 > 带有 XMLHttpRequest() 的 formData POST 请求不起作用，但在邮递员中工作

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

问题描述

我一直在尝试发出将图像上传到 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

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!"
        })
    })
}

标签： javascriptnode.jsmongodbblob

解决方案

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

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

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

推荐阅读