使用imgly/background-removal提示资源元数据未找到的问题排查

1. publicPath 配置错误 #

你当前使用的 public_path 是 unpkg 的网页浏览路径（包含browse），这不是资源文件的直接访问地址，包依赖的模型等资源需要从 CDN 直接获取，正确的配置应该是：

const public_path = 'https://unpkg.com/@imgly/background-removal@1.0.6/dist/';

去掉路径中的browse，因为browse是 unpkg 的网页浏览路由，并非资源存储路径。

2. 客户端 AJAX 请求错误 #

发送 FormData 时手动设置了Content-Type: application/x-www-form-urlencoded，这会导致服务器无法正确解析上传的文件。FormData 请求的 Content-Type 应该由浏览器自动设置为multipart/form-data; boundary=xxx，请删除以下代码：

// 删掉此行
xhttp.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded');

另外，同步请求（open方法第三个参数为false）不推荐，建议改为异步模式（设为true）。

3. 服务器端文件接收错误 #

Express 默认不处理multipart/form-data类型的请求，无法直接通过req.body.thePic获取上传文件，需要使用multer中间件解析文件：

1. 安装 multer：

npm install multer

2. 修改服务器代码：

const fs = require('fs');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' }); // 临时存储目录，需手动创建该文件夹

app.post('/getNewImg', upload.single('thePic'), async (req, res) => {
    try {
        // 将上传的临时文件转为 Blob
        const imgBuffer = fs.readFileSync(req.file.path);
        const imgBlob = new Blob([imgBuffer], { type: req.file.mimetype });
        
        const imgNew = await removeBackground(imgBlob, config);
        // 将处理后的图片转为 Base64 发送给前端（服务器端的 objectURL 前端无法访问）
        const buffer = Buffer.from(await imgNew.arrayBuffer());
        const base64 = `data:${imgNew.type};base64,${buffer.toString('base64')}`;
        
        res.send(base64);
        // 删除临时文件
        fs.unlinkSync(req.file.path);
    } catch (err) {
        console.error(err);
        res.status(500).send('图片处理失败');
    }
});

4. 额外注意事项 #

• 在 Node.js 环境使用 @imgly/background-removal 可能需要 Canvas 相关依赖支持，若后续出现其他错误，需检查对应依赖是否安装。
• 服务器端生成的objectURL仅在当前进程内有效，前端无法直接访问，因此改为返回 Base64 字符串是更可靠的方式。

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