如何将HTML图片传递至后端？排查请求参数获取异常

一、先解决当前参数无法传递的问题 #

你当前的axios GET请求写法错误，GET请求的参数需要放在配置对象的params属性中，否则后端无法通过req.query获取到参数。修正后的前端代码：

export async function imageTagging(image){
    console.log(image)
    const response = await axios.get('/api/tensorflow', {
        params: { // 参数必须包裹在params字段内
            image: image
        }
    });
    return response.data[0];
}

修正后后端的req.query就能拿到你传递的img标签字符串，但传整个img标签的HTML字符串对后端处理图片没有实际意义，后端需要的是图片的实际内容，下面是正确的图片传递实现方法。

二、正确的HTML图片传递至后端的三种方法 #

方法1：传递图片路径，后端读取本地文件（适合图片存放在后端服务器可访问目录的场景） #

前端只需传递img元素的src属性值，后端根据路径读取图片文件：

// 前端代码：提取img的src属性
export async function imageTagging(imageElement){
    const imageSrc = imageElement.src;
    const response = await axios.get('/api/tensorflow', {
        params: {
            imagePath: imageSrc
        }
    });
    return response.data[0];
}

后端代码（使用Node.js的fs模块读取文件）：

const fs = require('fs');
const path = require('path');

app.get('/api/tensorflow', userMiddleware.isLoggedIn, (req, res) => {
    const imagePath = req.query.imagePath;
    // 拼接服务器本地的实际文件路径（根据你的静态文件目录调整）
    const fullLocalPath = path.join(__dirname, 'public', imagePath.replace('/img/', ''));
    fs.readFile(fullLocalPath, (err, imageBuffer) => {
        if (err) {
            return res.status(500).send('读取图片失败');
        }
        // 此处执行tensorflow的图片识别逻辑，传入imageBuffer
        // 示例：const result = await tfProcess(imageBuffer);
        res.send(result);
    });
});

方法2：将图片转为Base64字符串传递（适合小体积图片） #

前端把img元素绘制到canvas，转为Base64字符串后用POST请求传递（避免GET的URL长度限制）：

export async function imageTagging(imageElement) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    // 设置canvas尺寸与图片原始尺寸一致
    canvas.width = imageElement.naturalWidth;
    canvas.height = imageElement.naturalHeight;
    ctx.drawImage(imageElement, 0, 0);
    // 转为Base64格式（可指定图片格式，比如image/png）
    const base64Image = canvas.toDataURL('image/jpeg');

    const response = await axios.post('/api/tensorflow', {
        image: base64Image
    });
    return response.data[0];
}

后端接收Base64并转为Buffer处理：

app.post('/api/tensorflow', userMiddleware.isLoggedIn, (req, res) => {
    // 去掉Base64的前缀标识
    const base64Data = req.body.image.replace(/^data:image\/jpeg;base64,/, '');
    const imageBuffer = Buffer.from(base64Data, 'base64');
    // 执行tensorflow图片处理逻辑
    // const result = await tfProcess(imageBuffer);
    res.send(result);
});

方法3：用FormData上传图片文件（适合大体积图片，最规范的文件上传方式） #

前端通过FormData封装图片的Blob数据，用POST请求上传：

export async function imageTagging(imageElement) {
    // 从img的src获取Blob数据
    const fetchRes = await fetch(imageElement.src);
    const imageBlob = await fetchRes.blob();

    const formData = new FormData();
    formData.append('image', imageBlob, 'uploaded-image.jpg'); // 第三个参数为自定义文件名

    const response = await axios.post('/api/tensorflow', formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    });
    return response.data[0];
}

后端需要使用multer中间件处理FormData上传：

1. 先安装multer：npm install multer
2. 后端代码：

const multer = require('multer');
const fs = require('fs');
// 配置临时上传目录（可自定义路径）
const upload = multer({ dest: './temp-uploads/' });

app.post('/api/tensorflow', userMiddleware.isLoggedIn, upload.single('image'), (req, res) => {
    // req.file包含上传文件的所有信息：路径、大小、文件名等
    const tempImagePath = req.file.path;
    // 读取临时文件内容
    const imageBuffer = fs.readFileSync(tempImagePath);
    // 执行tensorflow图片处理逻辑
    // const result = await tfProcess(imageBuffer);
    // 处理完后删除临时文件（可选）
    fs.unlinkSync(tempImagePath);
    res.send(result);
});

内容的提问来源于stack exchange，提问作者JAdel