基于Webpack的Node.js项目转用request实现浏览器文件上传遇阻

看起来你踩了一个常见的坑：request和request-promise本质是为Node.js环境设计的HTTP库，它们依赖Node.js的文件系统（fs）等核心模块，直接在浏览器环境里处理File对象会因为API不兼容报错。下面给你几个可行的解决方案：

方案1：改用浏览器原生Fetch API（推荐） #

Fetch是浏览器原生支持的HTTP请求API，完美适配浏览器环境的File/FormData操作，不需要额外依赖，代码简洁：

// 构建FormData对象，把File对象加进去
const formData = new FormData();
formData.append('file', filedata); // filedata是你从input获取的File对象

// 发起上传请求
fetch('/你的上传接口路径', {
  method: 'POST',
  body: formData
})
.then(res => res.json())
.then(result => console.log('上传成功:', result))
.catch(err => console.error('上传失败:', err));

这个方案不需要额外安装依赖，现代浏览器都支持，是最稳妥的选择。

方案2：使用request的浏览器兼容版本（不推荐长期使用） #

如果一定要坚持用request生态，可以试试request-browserify——它是request的浏览器适配版，通过Webpack打包后可以在浏览器里运行。不过要注意这个库已经停止维护了，长期项目不建议依赖。

步骤如下：

1. 安装依赖：

npm install request-browserify --save

2. 编写上传代码：

const request = require('request-browserify');
const formData = new FormData();
formData.append('file', filedata);

request.post({
  url: '/你的上传接口路径',
  formData: formData
}, (err, response, body) => {
  if (err) {
    console.error('上传出错:', err);
    return;
  }
  console.log('上传成功，返回结果:', body);
});

方案3：保留axios处理客户端上传（折中方案） #

你之前是axios/request组合，其实可以拆分职责：客户端用axios处理上传（它对浏览器环境的File上传支持非常成熟），服务端继续用request，这样既满足你“服务端用request”的需求，又避免浏览器端的兼容问题。示例代码：

const formData = new FormData();
formData.append('file', filedata);

axios.post('/你的上传接口路径', formData, {
  headers: {
    'Content-Type': 'multipart/form-data' // axios会自动识别FormData，这个头可以省略，但显式写也没问题
  }
})
.then(res => console.log('上传成功:', res.data))
.catch(err => console.error('上传失败:', err));

额外注意点 #

• 确保你的后端接口正确配置了multipart/form-data类型的请求处理（比如Express里用multer中间件）
• 确认filedata是有效的File对象（可以用filedata instanceof File检查）
• 如果需要兼容旧浏览器，记得给Fetch或FormData添加polyfill（比如whatwg-fetch）

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