Загрузка изображений на сервер Node.JS без использования <form> - PullRequest
Новая
       25

Загрузка изображений на сервер Node.JS без использования <form>

1 голос
/ 22 апреля 2019

У меня есть сервер 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?

Ответы [ 2 ]

1 голос
/ 22 апреля 2019

Итак, я сделал это так: 

    var request = new XMLHttpRequest();
    request.open("POST", "/test");

    var fd = new FormData();
    fd.append("file", avatarInput.files[0]);
    request.send(fd);

Я создал объект FormData, добавил изображение, которое пользователь выбрал во входе «avatarInput», и отправил объект на сервер. На стороне сервера я использовал express-fileupload для доступа к файлу: 

app.post("/test", (req, res) => {
    if(req.files){
        //With the follwing command you can save the recieved image
        req.files.file.mv("./file.png",  (err) => {if(err)throw err});
    }
    res.end();
});
0 голосов
/ 22 апреля 2019

Вы можете попробовать этот пример. Это сработало для меня. Я надеюсь, что это может помочь вам.

Отправка запроса 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'});
}
...