Nodejs 如何做 PUT DELETE 图片上传的转发？

Nodejs 如何做 PUT DELETE 图片上传的转发？

现有一个nodejs做的项目要在前台使用ajax上传图片到另外一个域的接口，由于ajax无法跨域，只能通过nodejs转发。请问要在nodejs里面进行操作转发？

4 回复

Node.js 如何实现 PUT 和 DELETE 请求的图片上传转发？

在某些情况下，前端应用可能需要将图片上传到另一个域的接口。由于浏览器的同源策略限制（即AJAX请求不能跨域），我们可以使用Node.js作为中间层来处理这种跨域请求。本文将介绍如何使用Node.js实现PUT和DELETE请求的图片上传转发。

示例环境

  • Node.js 版本：14.x 或更高版本
  • Express 框架
  • Multer 处理文件上传

步骤

  1. 安装必要的依赖

    npm install express multer

  2. 创建Node.js服务器

    首先，我们需要创建一个Express服务器来接收前端的请求，并将这些请求转发到目标域。

    const express = require('express');
const multer = require('multer');
const axios = require('axios');

const app = express();
const upload = multer({ dest: 'uploads/' });

// 目标域的API地址
const targetUrl = 'https://target-domain.com/api/upload';

// PUT请求转发
app.put('/upload', upload.single('image'), async (req, res) => {
    try {
        const formData = new FormData();
        formData.append('image', req.file.buffer);

        const response = await axios.put(targetUrl, formData, {
            headers: {
                ...formData.getHeaders(),
                'Content-Type': 'multipart/form-data'
            }
        });

        res.json(response.data);
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

// DELETE请求转发
app.delete('/delete/:id', async (req, res) => {
    try {
        const response = await axios.delete(`${targetUrl}/${req.params.id}`);

        res.json(response.data);
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

  3. 前端发送请求

    在前端，你可以使用jQuery、Fetch API或Axios发送PUT和DELETE请求。

    // 使用Axios发送PUT请求
axios.put('http://localhost:3000/upload', formData)
    .then(response => {
        console.log('Upload successful:', response.data);
    })
    .catch(error => {
        console.error('Error uploading file:', error);
    });

// 使用Axios发送DELETE请求
axios.delete('http://localhost:3000/delete/123')
    .then(response => {
        console.log('Delete successful:', response.data);
    })
    .catch(error => {
        console.error('Error deleting file:', error);
    });

总结

通过这种方式，我们可以在Node.js中实现图片上传的PUT和DELETE请求的转发。这不仅解决了跨域问题，还提供了灵活的文件处理功能。希望本文对你有所帮助！


这个应该蛮简单的把。。就相当于node在这里做了一个proxy的功能把。。。

前台ajax跨域上传图片？ 怎么不是 表单+iframe 呢？

要实现从一个前端页面到另一个域的图片上传，并且使用PUT或DELETE方法，可以通过Node.js服务器来处理转发请求。以下是具体步骤和代码示例。

步骤

  1. 设置路由和控制器：在你的Node.js应用中设置一个路由来处理图片上传。
  2. 创建代理请求：在服务器端接收请求后，使用axios或其他HTTP客户端库来转发请求到目标地址。
  3. 处理响应：将目标服务器的响应返回给前端。

示例代码

首先安装所需的依赖：

npm install express axios multer

然后创建一个基本的Express应用：

const express = require('express');
const axios = require('axios');
const multer = require('multer');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.use(express.json());

// 处理PUT请求
app.put('/upload', upload.single('image'), async (req, res) => {
    try {
        const { file } = req;
        const { url } = req.body; // 假设前端提供了目标URL

        if (!url) {
            return res.status(400).send('缺少目标URL');
        }

        const formData = new FormData();
        formData.append('image', fs.createReadStream(file.path));

        const response = await axios.put(url, formData, {
            headers: {
                ...formData.getHeaders()
            }
        });

        res.send(response.data);
    } catch (error) {
        console.error(error);
        res.status(500).send('服务器错误');
    }
});

// 处理DELETE请求
app.delete('/upload/:id', async (req, res) => {
    const { id } = req.params;
    const { url } = req.body; // 假设前端提供了目标URL

    if (!url) {
        return res.status(400).send('缺少目标URL');
    }

    try {
        const response = await axios.delete(`${url}/${id}`, {
            // 可能需要添加其他参数，如身份验证头等
        });

        res.send(response.data);
    } catch (error) {
        console.error(error);
        res.status(500).send('服务器错误');
    }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

解释

  • multer: 用于处理文件上传。
  • axios: 用于发送HTTP请求。
  • PUT 和 DELETE 路由: 处理来自前端的PUT和DELETE请求，并将其转发到指定的目标URL。

这样，前端可以使用AJAX调用你的Node.js服务器，而Node.js服务器则负责处理实际的图片上传和删除操作。

回到顶部