说句实话，现在的开发简单多了。因为有现成的第三方的上传文件的代码。如果放在我们以前做开发，上传文件的代码都得自己写。
那现在的程序员面对上传文件的功能到底写啥代码。
1）、对于前端人员：就是把后端的请求地址，请求方式，要传的文件对象（选择的文件）写好。
2）、对于后端人员：只需要把接收的文件做重命名，修改位置，图片地址保存的数据库，再把图片地址响应给前端就行。
你看看，是不是上传文件是怎么上传的核心部分我们根本不用去关注。
话不多说，上干货。
本文后端使用nodeJS，第三方模块使用multer。再用了一点点jQuery。
示例：注册功能的上传头像。
1、前端选择文件并发送请求 -> 后端接收到文件本身 -> 保存到服务器（硬盘）上 --->对文件进行重命名，并加上扩展名，--->把路径响应给前端---->前端把路径放在img标签的src属性
2、注册时，把前端拿到图片路径要发给后端，后端保存到数据库中。
一、前端代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册页面</title>
</head><body><div><h1>注册页面</h1><img id="selectfile" src="./images/defaultHeader.png" style="width: 100px; height: 100px;"><input id="inputfile" type="file" style="display: none;"><p>手机号：*<input type="text" id="userphone"><span id="phoneMsg"></span></p><p>密码：<input type="text" id="userpass" placeholder="长度6-16位，由数字，字母，下划线"><span id="passMsg"></span></p><p>确认密码：<input type="password" id="userpass2"><span id="pass2Msg"></span></p><p><input type="button" value="注册" id="btnRegister"><span id="errMsg"></span></p></div>
</body></html>
<script src="./js/jquery.js"></script>
<script>let headerPath = "";window.onload = function () {// 点击图片，调用 input type=file 标签的click事件$("#selectfile").on("click", function () {document.getElementById("inputfile").click();//触发onclick事件。})// onChange事件：当选择的文件发生变化时触发document.getElementById("inputfile").onchange = function () {console.log("选择了新的文件");// 上传图片var formData = new FormData();// 通过formData定义参数格式。// formData.append("参数名",参数值)formData.append('photo', document.getElementById('inputfile').files[0]);// $.ajax() 是jQuery封装好的ajax函数。$.ajax({url: "/uploadajax",type: "post",data: formData,contentType: false,processData: false,success: function (res) {console.log("后端响应的内容",res);console.log("res.path",res.path);document.getElementById("selectfile").src=res.path;headerPath = res.path}});};// 注册按钮document.getElementById("btnRegister").onclick = register;function register() {//为了减少篇幅，省去了注册功能的代码 }}</script>二、后端代码：
1、用express搭建项目（用express脚手架）
express -e 项目名2、安装第三方模块：multer：
npm i multer@1.4.5-lts.1 --save我用的版本："multer": "^1.4.5-lts.1"
3、在app.js文件里。增加代码： 1）、引入模块：
let multer = require('multer');2）、实例化并安装中间件
//2 实例化
let objMulter = multer({ dest: './public/upload' }); //dest: 指定 保存位置（存到服务器)，这个根据实际情况可以修改。
//安装中间件，
app.use(objMulter.any()); //允许上传什么类型文件,any 代表任何类型 项目只有运行后，会自动在你的项目里，产生一个目录 public/upload，以后上传的文件都在此目录保存。
3）、写后端接口。
以我的项目为例。
3.1）、在routes下创建文件 uploadajax.js，写上如下代码：
var express = require("express");
const fs = require("fs");
var router = express.Router();
router.post("/", function (req, res, next) {// multer对req对象做了扩展，增加了files属性，files属性里保存着上传文件的相关信息。// 如下：// fieldname：表单的name，其实就前端的参数名。 console.log("req.files[0].fieldname", req.files[0].fieldname);// photo
const fileObj = req.files[0];let filename = (new Date()).getTime();//时间戳，毫秒数。let newPath = fileObj.destination+'/header'+filename+".jpg";//1、重命名文件fs.renameSync(fileObj.path,newPath);//2、给前端响应图片存储的路径。前端放在img标签的src属性上，就可以显示图片了。res.json({code:"200",path:`./upload`+'/header'+filename+".jpg"});
});
module.exports = router;3.2）、在app.js里，引入 uploadajax.js，并写上接口的地址。
var uploadajaxRouter = require("./routes/uploadajax");
………………
app.use("/uploadajax",uploadajaxRouter);
