javascript - 不使用 将图像上传到 Node.JS 服务器

Question

我有一个 node.js 服务器，它使用 express-fileupload 来接受图像。现在我正在研究上传图像的功能。但我不想使用

，因为出于各种原因我更喜欢 xhtml 请求，但主要是因为我不想在用户上传图片后重定向用户。

我试过将图片读取为 dataURI，将其发送到服务器，对其进行解码并将其写入文件，但没有用，而且似乎资源密集且费力。

//I used the dataString from the callback method and wrote it to a file using fs.writeFile
function dataURItoimage(dataString, callback){
   const atob = require("atob");

   dataString.replace("data:image/jpeg;base64,", "");
   dataString.replace("data:image/png;base64,", "");

   atob(dataString);
   callback(null, dataString);
}

//User side code
avatarInput.addEventListener("change", (e) => {
    const reader = new FileReader();
    reader.readAsDataURL(avatarInput.files[0]);
    reader.onload = () => {
        avatar = reader.result;
        tosend.avatar = reader.result;
    }
}, false);

uploadButton.onclick = () => {
    var request = new XMLHttpRequest();
    request.open("POST", "/avatarUpload");
    request.setRequestHeader("Content-Type", "application/json");

    var tosend = {avatar: ""};
    tosend.avatar = avatar;

    request.send(JSON.stringify(tosend));
}

有没有更好的方法将用户可以选择的图像上传到 node.js 服务器？

Answer 1

你可以试试这个例子。它对我有用。希望对您有所帮助。

发送 dataURL 抛出 Ajax 请求:

const dataURL = snapshotCanvas.toDataURL('image/png');
$.ajax({
    url: 'http://localhost:3000/upload-image',
    dataType: 'json',
    data: { data: dataURL },
    type: 'POST',
    success: function(data) {}
});

接收请求:

router.post('/', (req, res) => {
    const base64 = req.body.data.replace(/^data:image\/png;base64,/, "");
    fs.writeFileSync(`uploads/images/newImage.jpg`, base64, {encoding: 'base64'});
}