node express框架 图片及文件上传

HTML页面

let imgInput=$("#img");//为input file的对象
            let fd = new FormData();//获取FormData对象的实例
            let file = imgInput[0].files[0];//获取file对象中的第一个文件
            fd.append("file",file);//加入到FormData对象中

            $.ajax({

                url : "./ajax/upImg",
                type : "post",
                data : fd,
                contentType : false,//注意此处提交的设置
                processData : false,//注意此处提交的设置
                success(info){

                  $(".imgdv img").attr("src",info.fileUrl);//返回值为图片在服务器上的路径，给预览的img赋值
                    
                }
            });

node页面

安装外部引用：npm i multer -S

添加引用：const multer = require("multer")

ps：因为在node服务上，接收文件上传的方法，基本不会改变，无非是对保存图片路径的修改。所以定义一个公共js文件。需要上传的直接调用就好了。

注意调用的方式略有些特别

接收文件上传的公共js文件

const multer = require("multer")//添加外部模块的引用

var storage = multer.diskStorage({
  destination: function (req, file, cb){
      //此处为设置文件路径
      cb(null, './public/userImg')//存储到服务器上文件地址，可以自己定义路径
  },
  filename: function (req, file, cb){
    //通过一系列处理 获取原图片的后缀名
    let fileList = file.originalname.split(".")
    let ext = fileList[fileList.length-1]

    //以时间戳为文件名可保证文件名不会重复
    let times = new Date()       //文件名，此处采用时间戳的形式，有些可以采用hash值的形式。自行定义
    times = times.getTime()
    
    //通过时间戳和原文件的后缀来生成新的文件名
    let newName = `${times}.${ext}`
      cb(null, newName)
  }
});

module.exports =  multer({storage});


//接收到html页面ajax传递过来的值
const upImg=require("../tools/upImg");//在页面中添加对图片上传自定义模块的引用（模块见上