用 获取图片文件需监听 change 事件，从 event.target.files 取 File 对象；预览用 FileReader 转 data URL 或 URL.createObjectURL()；上传用 FormData 配合 fetch，注意后端配置、跨域及文件限制。
怎么用 <input type="file"> 拿到图片文件
关键不是“上传”，而是先正确获取用户选中的图片文件对象。直接监听 change 事件，从 event.target.files 中取第一个（或遍历）File 对象：
-
accept="image/*"属性能限制文件类型，但仅是前端提示，不可信 -
multiple属性开启多图选择，此时files是FileList，不是数组，需用Array.from()转换才能用map或forEach - 别直接读
event.target.value—— 它只返回文件名（含路径伪造），拿不到二进制内容
如何预览图片而不发请求
用 FileReader 读取本地文件并转成 data URL，再赋给 <img alt="如何实现基础的图片上传功能_通过HTML和JavaScript制作上传功能" > 的 src：
const reader = new FileReader();
reader.onload = (e) => {
imgEl.src = e.target.result; // e.target.result 就是 data:image/png;base64,...
};
reader.readAsDataURL(file);
-
readAsDataURL适合小图预览；大图（如 >5MB）可能卡顿或内存溢出，可改用readAsArrayBuffer+URL.createObjectURL(file)更高效 -
createObjectURL返回的 URL 必须在不用时调用URL.revokeObjectURL()，否则内存泄漏 - 移动端 Safari 对
data URL长度有限制，超长会显示空白
怎么把图片发到后端（基础 FormData 方式）
构造 FormData，append 文件对象，用 fetch 发送：
const formData = new FormData();
formData.append("image", file); // 后端接收字段名是 "image"
fetch("/upload", {
method: "POST",
body: formData // 不要设 Content-Type，浏览器会自动加 boundary
});
- 后端必须能解析
multipart/form-data（如 Express 需multer，Node.js 原生需手动解析） - 如果后端只接受 JSON，不能直接传
File；得先转 base64 或二进制，但体积膨胀、性能差，不推荐 - 上传前建议检查
file.size和file.type，避免无效请求（注意：type 可被篡改，仅作快速过滤）
常见报错和绕不过去的坑
上传失败往往不是代码写错，而是环境或协议问题：
立即学习“Java免费学习笔记（深入）”；
-
413 Payload Too Large：Nginx 默认限制 1MB，需改client_max_body_size -
405 Method Not Allowed：后端没开POST路由，或 CORS 预检失败（确保后端响应带Access-Control-Allow-Methods: POST） - 图片上传成功但后端收不到字段：检查
FormData.append()第一个参数（字段名）是否和后端约定一致，比如 Python Flask 用request.files.get("avatar")，那前端就得append("avatar", file) - Chrome 控制台报
net::ERR_CONNECTION_REFUSED：前端地址是http://localhost:3000，但后端跑在http://127.0.0.1:8000—— 这俩域名不同源，CORS 会拦截
真正麻烦的从来不是怎么写 upload，而是服务端配置、跨域策略、文件存储路径权限、以及用户选了 200 张图时你怎么控制并发和进度反馈。
