Отправка изображения с помощью axios в Node.js и последующее его использование - PullRequest
Новая
       30

Отправка изображения с помощью axios в Node.js и последующее его использование

0 голосов
/ 13 июня 2019

Я пытаюсь загрузить изображение из внешнего интерфейса, post оно с аксиом в конец (node.js), а затем оттуда post это снова в службу изображений GroupMe.

Главное - избегать использования токена API во внешнем интерфейсе, и поэтому я пытался сначала отправить запрос на сервер, а затем отправить фактический запрос API в службу изображений GroupMe, которая ожидает получить FormData изизображение и отправляет обратно преобразованный URL-адрес изображения.

Я попытался отправить FormData напрямую в службу изображений GroupMe из внешнего интерфейса, и все работает нормально.Однако для этого мне пришлось хранить токен во внешнем интерфейсе, что, я считаю, не очень хорошая идея.

Рабочий код ниже: 

let config = {
    headers : {
        'X-Access-Token': myToken,
        'Content-Type' : 'multipart/form-data'
    }
}
let fd = new FormData()
fd.append('name', 'image')
fd.append('file', fileToUpload)

axios.post'(https://image.groupme.com/pictures', fd, config)
.then((response)=>{
    console.log(response)
})
.catch(err =>{
    console.log(err.response)
})

ЧтоВместо этого мне нужно отправить запрос в серверную часть следующим образом: 

axios.post(process.env.baseUrl+'/messengerRequests/upload-file/', fd, config)
.then((response)=>{
    console.log(response)
})
.catch(err =>{
    console.log(err.response)
})

А теперь в серверной части каким-то образом можно получить эти FormData и затем создать еще один запрос на отправку в GroupMe.сервис изображений, как я изначально делал в front-end. 

sendMessage: async(req, res) => {
 axios.post('https://image.groupme.com/pictures', ???, config)
 .then((response)=>{
    res.send(response)
 })
 .catch(err =>{
    console.log(err.response)
 })
}

Я не знаю, где он появляется в запросе axios.В req.body или req.params ничего нет, поэтому я не могу просто передать его дальше для следующего post.

Есть ли способ как-нибудь снова передать эти FormData?Или, может быть, есть способ безопасно использовать токен в frond-end?

Ответы [ 2 ]

2 голосов
/ 13 июня 2019

Итак, отправка изображения в GroupMe должна быть относительно простой, используя Node.js и Express / Multer / Request.Я обратился за Запросом, а не к Axios, на бэкэнде, так как я более знаком с API, но на самом деле это та же разница.

Код Node.js (index.js) 

const request = require("request");
const express = require("express");
const multer = require("multer");
const upload = multer();

const app = express();
const port = 3000;
const myToken = "" // Your API token goes here.

app.use(express.static("./"));

/* Here we take the image from the client and pass it on to GroupMe */
app.post("/uploadFile", upload.any(), (req, res) => {
    sendImageToGroupMe(req, res);
});

function sendImageToGroupMe(req, res) {

    const options = {
        uri: "https://image.groupme.com/pictures",
        body: req.files[0].buffer,
        method: "POST",
        headers: {
            "X-Access-Token" : myToken 
        }
    }

    request(options, (err, response, body) => {
        console.log("Request complete: Response: ", body);
        if (err) { 
            console.error("Request err: ", err);
            res.status(500).send("Upload failed: ", err.message);
        } else {
            res.status(201).send("Upload successful: GroupMe response: " + body);
        }
    });
}

app.listen(port);

Клиентская сторона

index.html 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>

            function uploadFile() {
                var fileToUpload  = document.querySelector('input[type=file]').files[0];       
                let config = {
                    headers : {
                        'Content-Type' : 'multipart/form-data'
                    }
                }

                let fd = new FormData()
                fd.append('name', 'image')
                fd.append('file', fileToUpload)

                axios.post('http://localhost:3000/uploadFile', fd, config)
                .then((response)=>{
                    console.log("Image posted successfully: ", response);
                    showOutput("Image posted successfully: " + response.data);
                })
                .catch(err =>{
                    console.error("Image post failed: ", err)
                    showOutput("Image post failed!");
                })
            }

            function showOutput(html) {
              document.getElementById("output").innerHTML = html;
            }
        </script>
    </head>
    <body style="margin:50px">
        <input type="file" onchange="uploadFile()"><br>
        <p id="output"></p>
    </body>
</html>

Все файлы находятся в одном каталоге.Вы можете перейти на http://localhost:3000/ для проверки кода index.html, он будет обслуживаться сервером Node.js в виде статического файла.

Я получаю ответ, подобный приведенному ниже, из API GroupMe:

{
    "payload": {
        "url": "https://i.groupme.com/157x168.png.940f20356cd048c98478da2b181ee971",
        "picture_url": "https://i.groupme.com/157x168.png.940f20356cd048c98478da2b181ee971"
    }
}

Мы будем обслуживать локально на порту 3000, поэтому для запуска сервера: 

node index.js
1 голос
/ 13 июня 2019

Если вы используете Express, вам нужно что-то для обработки FormData. Я использовал multer для чего-то подобного раньше. Мне пришлось сохранить файлы в локальном хранилище, а затем повторно отправить файл с помощью axios.

...