JS上传文件到服务器地址，核心就是用FormData对象把文件包起来，再用XMLHttpRequest或fetch发送到后端接口。这个过程不复杂，但很多人栽在细节上，比如后端接收字段名不对、跨域没配好、大文件卡死，这篇直接给你前端代码、后端接收逻辑、以及常见坑的解法，你照着抄就能跑通。
JS上传文件到服务器地址的基本原理
浏览器里的JS不能直接操作服务器文件系统,它只能发起HTTP请求，把文件以二进制流的形式塞进请求体里，最常见的做法是构造一个FormData对象，用append方法把文件挂上去，然后通过AJAX发送，服务器那边从请求体里取出这个文件，再写入磁盘或对象存储。
整个过程分三步：前端读文件、前端发请求、后端收文件，每一步都有对应的标准API，先记住这个大框架，后面代码才不会乱。
JS上传文件到服务器地址的几种方式对比
给JS选上传方案,本质是选网络请求方案，市面上主流的有三种：原生XMLHttpRequest、原生fetch、第三方库axios，三者的核心逻辑一样，只是写法、进度回调和兼容性不同。
| 方式 | 进度回调 | 兼容性 | 代码量 | 推荐场景 |
|---|---|---|---|---|
| XMLHttpRequest | 原生支持upload.onprogress |
所有浏览器 | 中等 | 老项目、需要精确进度条 |
| fetch | 流式读取可实现 | 现代浏览器 | 少 | 简洁项目、不需要兼容IE |
| axios | 支持onUploadProgress |
需转译 | 较少 | 项目已用axios、需要拦截器 |
行业共识认为,fetch是未来的主流，但XMLHttpRequest在进度条和兼容性上仍然不可替代，如果你在写新项目，优先fetch；如果涉及老系统或上传大文件，XMLHttpRequest更稳。
原生XMLHttpRequest方式
这是最经典的方式,兼容IE10以上，进度回调是它最大的优势，核心代码就几行：
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://your-server.com/upload', true);
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) 100);
console.log(`已上传 ${percent}%`);
}
};
xhr.onload = () => {
if (xhr.status === 200) {
console.log('上传成功', xhr.responseText);
}
};
xhr.send(formData);
注意formData.append('file', file)里的'file'，这个字段名必须和后端接口约定一致，后端用什么名字接收，你就得传什么名字。
fetch方式
fetch语法简洁,默认返回Promise，配合async/await很舒服，但默认情况下fetch不提供上传进度事件，想拿进度得自己用流读取，或者干脆不显示进度条。
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
const response = await fetch('https://your-server.com/upload', {
method: 'POST',
body: formData
});
const result = await response.json();
console.log(result);
这段代码能做到上传成功后的处理,只是没有进度条，如果产品需求非要进度条，就得换XMLHttpRequest，或者用axios的onUploadProgress。
第三方库方式（axios）
axios在封装层面做得最友好,拦截器、取消请求、进度回调都内置，项目里本来就用了axios的话，别再单独引一个上传库。
import axios from 'axios';
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
axios.post('https://your-server.com/upload', formData, {
onUploadProgress: (e) => {
const percent = Math.round((e.loaded / e.total) 100);
console.log(`${percent}%`);
}
}).then((res) => {
console.log(res.data);
});
axios的进度回调用起来和XMLHttpRequest几乎一样,但代码量更少，还自带超时和错误处理。
JS上传文件到服务器地址代码示例：前端实操
这里给一个完整的可运行示例,包含文件选择、上传按钮、进度条和结果展示，假设后端接口地址是https://api.example.com/upload，字段名为file。
HTML部分：
<input type="file" id="uploadFile"> <button id="uploadBtn">开始上传</button> <div id="progress" style="width: 0%; height: 20px; background: #4caf50;"></div>
JS部分：
const uploadBtn = document.getElementById('uploadBtn');
const uploadFile = document.getElementById('uploadFile');
const progressBar = document.getElementById('progress');
uploadBtn.addEventListener('click', () => {
const file = uploadFile.files[0];
if (!file) {
alert('请先选择文件');
return;
}
const formData = new FormData();
formData.append('file', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/upload', true);
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) 100;
progressBar.style.width = percent + '%';
}
};
xhr.onload = () => {
if (xhr.status === 200 || xhr.status === 201) {
console.log('服务器返回：', xhr.responseText);
} else {
console.error('上传失败，状态码：', xhr.status);
}
};
xhr.onerror = () => {
console.error('网络异常，请求没发出去');
};
xhr.send(formData);
});
这里有个实操细节：文件名不要直接拼接在URL上，比如
/upload?filename=xxx.jpg，中文文件名、特殊字符会被URL编码，后端取出来还可能乱码，正确做法是把文件名放进FormData里，和文件一起发。
JS上传文件到服务器地址怎么实现：后端接收要点
前端发完请求,后端要能接住，不同语言接收方式不同，但原理一样：从请求体里读multipart/form-data数据。
以Node.js的Express框架为例，用multer中间件最省事，先安装：
npm install multer
然后写个路由：
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const storage = multer.diskStorage({
destination: './uploads/',
filename: (req, file, cb) => {
const uniqueName = Date.now() + '-' + Math.round(Math.random() 1e9);
const ext = path.extname(file.originalname);
cb(null, uniqueName + ext);
}
});
const upload = multer({ storage });
app.post('/upload', upload.single('file'), (req, res) => {
if (!req.file) {
return res.status(400).json({ message: '没有收到文件' });
}
res.status(200).json({ path: '/uploads/' + req.file.filename });
});
app.listen(3000);
注意upload.single('file')里的'file'，必须和前端formData.append('file', file)的字段名完全一致，否则后端拿到req.file是undefined，这是最常见的对接失败原因，没有之一。
后端一定要限制文件大小和类型。multer可以这样做：
const upload = multer({
storage,
limits: { fileSize: 10 1024 1024 }, // 10MB
fileFilter: (req, file, cb) => {
if (file.mimetype.startsWith('image/')) {
cb(null, true);
} else {
cb(new Error('只允许上传图片'));
}
}
});
不要信前端校验,前端绕过去太简单了，安全边界永远在后端。
JS上传文件到服务器地址跨域问题怎么解决
你在本地localhost:5500调试，请求https://api.example.com，浏览器会拦你，这就是跨域。解决跨域不是前端能独自完成的，必须后端配CORS头。
后端在响应头里加这些字段：
res.setHeader('Access-Control-Allow-Origin', '');
res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
注意,上传文件用的是multipart/form-data，这个请求会先触发一个OPTIONS预检请求，如果你的后端没有正确处理OPTIONS，正式上传请求就会被拦下来，Node.js里可以这样：
app.options('/upload', (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '');
res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.sendStatus(200);
});
前端这边,如果用了fetch，不要手动设置Content-Type，让浏览器自动生成multipart/form-data的边界标记，你一旦手动加了Content-Type，边界就丢了，后端解析直接失败，很多新手在这卡半天，最后发现是这行代码的问题。
JS上传文件到服务器地址需要什么环境
前端需要一个现代浏览器,不用装任何环境，后端需要一个能接收multipart/form-data的服务器，Node.js、Java、Python、PHP都行，本地开发可以用localhost，生产环境必须走https，否则浏览器会限制上传大文件。
如果要处理超大文件（比如视频），单个请求直接发容易超时，此时可以考虑分片上传：把文件切成若干块，每块单独上传，后端再拼接，JS端切片的API是File.slice(start, end)，配合并发控制就能实现，但分片上传的复杂度上升不少，如果业务没硬性要求，建议先用整包上传。
上传大文件时的内存和进度条注意事项
用FormData上传文件，浏览器会先把文件读进内存，再发出去，几百MB的文件会让内存飙升，可能导致页面卡顿，为避免这个问题，尽量用XMLHttpRequest的send方法，它内部会处理流式传输，比手动读FileReader合理。
进度条方面,最稳妥的是xhr.upload.onprogress，如果你的项目用了axios，onUploadProgress也一样，fetch要自己解析响应体的ReadableStream，代码量不小，不建议新手尝试。
关于JS上传文件到服务器地址的常见问题
js上传文件到服务器地址怎么带上额外参数？
FormData里继续append就行，
formData.append('token', 'abc123');
formData.append('userId', '12345');
后端在req.body里能取到这些普通字段，要注意的是，字段名不要和下发的文件字段冲突。
js上传文件到服务器地址大小限制怎么设？
前端用file.size判断，大于限制就弹提示，但这只是用户体验，后端必须用中间件或框架配置强制限制，否则别人绕过前端直接发大文件，服务器会崩，Node.js的multer里用limits.fileSize，Java的Spring里用spring.servlet.multipart.max-file-size。
js上传文件到服务器地址能不能传多个文件？
能,前端循环append多个同名文件，或者用数组形式，后端对应改成upload.array('files', 5)，req.files就拿到数组了，前端记得把input的multiple属性加上，不然用户一次只能选一个文件。
上传文件的坑多数不在JS语法,而在前后端字段名不一致、跨域头没配好、大文件超时这三件事，把这三点按上面的代码处理掉，你的上传功能基本就稳了，记住最核心的一点：FormData是唯一的传送门，字段名和后端约好，其余都是细节。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/js%e6%80%8e%e4%b9%88%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e5%88%b0%e6%9c%8d%e5%8a%a1%e5%99%a8%e5%9c%b0%e5%9d%80%ef%bc%8c%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e5%88%b0%e6%9c%8d%e5%8a%a1%e5%99%a8%e7%9a%84/
