说句实话，现在的开发简单多了。因为有现成的第三方的上传文件的代码。如果放在我们以前做开发，上传文件的代码都得自己写。
那现在的程序员面对上传文件的功能到底写啥代码。
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);
扫一扫
354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
