上传（图片）文件的功能实现

      说句实话，现在的开发简单多了。因为有现成的第三方的上传文件的代码。如果放在我们以前做开发，上传文件的代码都得自己写。

那现在的程序员面对上传文件的功能到底写啥代码。

1）、对于前端人员：就是把后端的请求地址，请求方式，要传的文件对象（选择的文件）写好。

2）、对于后端人员：只需要把接收的文件做重命名，修改位置，图片地址保存的数据库，再把图片地址响应给前端就行。

你看看，是不是上传文件是怎么上传的核心部分我们根本不用去关注。

话不多说，上干货。

          本文后端使用nodeJS，第三方模块使用multer。再用了一点点jQuery。

示例：注册功能的上传头像。

1、前端选择文件并发送请求 -> 后端接收到文件本身 -> 保存到服务器（硬盘）上 --->对文件进行重命名，并加上扩展名，--->把路径响应给前端---->前端把路径放在img标签的src属性

2、注册时，把前端拿到图片路径要发给后端，后端保存到数据库中。

一、前端代码：

    
    
    



    

        
注册页面
        
        
        

            手机号：
            *
            
        
        

            密码：
            
            
        
        

            确认密码：
            
            
        
        

            
            
        
    

二、后端代码：

1、用express搭建项目（用express脚手架）

express -e 项目名

2、安装第三方模块：multer：

npm i [email protected] --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);
​