Question

我正在尝试从前端上载图像，使用axios将其post上传到后端（node.js），然后从那里post再次将其上传到GroupMe图像服务。

主要是要避免在前端使用API令牌，因此我试图先向后端发送请求，然后再将实际的API请求发送给希望获取FormData的GroupMe图像服务图片并发送回转换后的图片网址。

我试图将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图像服务创建另一个发布请求。

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？还是有办法安全地在前端使用令牌？

Answer 1

因此，使用Node.js和Express / Multer / Request将图像发布到GroupMe应该相对简单。因为我对API更加熟悉，所以我一直在后端使用Request而不是Axios，但实际上是相同的。

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服务器会将其作为静态文件提供。

我从GroupMe API收到如下响应：

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

我们将在端口3000上本地服务，因此要启动服务器：

node index.js

Answer 2

如果使用Express，则将需要一些东西来处理FormData。我以前曾经用http://download.opensuse.org/repositories/devel:/languages:/php:/php56/SLE_12_SP3/x86_64/php5-5.6.40-5.1.x86_64.rpm做过类似的事情。我必须将文件保存到本地存储中，然后使用axios重新发送文件。

将带有axios的图像发送到Node.js，然后进一步使用它

2 个答案: