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");//在页面中添加对图片上传自定义模块的引用(模块见上