如何通过POST发送WebAPI获取URL的图片？后端使用multer

核心思路 #

要将远程图片URL对应的文件发送到使用multer的后端，需先把图片资源转为Blob对象，再包装到FormData中，最后通过POST请求发送，这样multer就能正常解析处理。

具体实现步骤 #

1. 获取图片并转换为Blob
   使用fetch请求目标图片URL，将响应结果转为Blob格式：

   async function getImageBlob(imageUrl) {
     const response = await fetch(imageUrl);
     if (!response.ok) throw new Error('图片获取失败');
     return await response.blob();
   }
   

2. 构建FormData并发送POST请求
   将Blob对象添加到FormData中，注意字段名要和后端multer配置的名称一致，再通过fetch或axios发送请求：

   async function uploadImage(imageUrl) {
     try {
       const blob = await getImageBlob(imageUrl);
       const formData = new FormData();
       // 字段名需和后端multer的upload.single('upload')中的名称匹配
       formData.append('upload', blob, 'image.jpg'); // 第三个参数为自定义文件名
   
       const response = await fetch('/your-upload-endpoint', {
         method: 'POST',
         body: formData
       });
   
       if (response.ok) {
         console.log('图片上传成功');
         const result = await response.json();
         // 处理后端返回结果
       } else {
         console.error('图片上传失败');
       }
     } catch (err) {
       console.error(err);
     }
   }
   

3. 后端multer配置示例
   确保后端multer的接收字段名和前端一致：

   const express = require('express');
   const multer = require('multer');
   const app = express();
   
   // 配置文件存储路径与命名规则
   const storage = multer.diskStorage({
     destination: (req, file, cb) => {
       cb(null, './uploads/'); // 需提前创建uploads文件夹
     },
     filename: (req, file, cb) => {
       cb(null, Date.now() + '-' + file.originalname);
     }
   });
   
   const upload = multer({ storage: storage });
   
   // 接收上传的接口
   app.post('/your-upload-endpoint', upload.single('upload'), (req, res) => {
     // req.file即为上传的文件对象
     res.json({ message: '上传成功', file: req.file });
   });
   
   app.listen(3000, () => console.log('服务器运行在3000端口'));
   

关于input type="image"的说明 #

input type="image"本质是表单提交按钮，仅作为按钮的视觉样式使用，点击后会提交所在表单，但不会将图片本身作为上传内容，因此确实不适合用来上传图片资源。

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