前台用jquery的创建交互式、快速动态网页应用的网页开发技术发请求，后台用NodeJS的multer模块实现图片上传。这个演示给我的感悟是一定要自己能实现出来，而不是看了别人写好就直接"拿来"用

注（注意)

大家先在公众的目录下创建一个名为上传的文件夹，这个文件夹是用来保存你上传过的图片

安装multer模块：

国家预防机制i -S多代码（代码)

1.app.js

const express=require(' express ')；const multer=require(' multer ')；const path=require(' path ')；const app=express()；//所有请求过来，都去项目当前的公众的目录下寻找所请求的文件，找到就返回app.use(express.static(' ./public ')；//选择磁盘存储存储常量存储=multer。磁盘存储({ destination : function(req，file，cb) { cb(null，path。解析(' public/uploads '))；}，文件名：函数(请求，文件，cb) { cb(空，日期。现在()。路径。extname(文件。原名称))；//增加了文件的扩展名}});const upload=multer({ storage : storage })；app.post('/profile '，upload.single('avatar ')，function(req，res，next) { res.send({ err: null，//filePath:就是图片在项目中的存放路径文件路径：“上传/”路径。基本名称(请求。文件。路径)})；});app.listen(3000，function () { console.log('app正在侦听3000端口');});2.index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' TItle/TItle script type=' text/JavaScript ' src=' http : js/jquery-3。1 .0 .量滴js '/script/head dyform class=' form-horizontal ' enctype=' multipart/form-data ' method=' post ' action=' JavaScript :输入类型=' file ' id=' choose '/button onclick=' handle()'上传/button img class=' new img '/form script函数句柄(){ //获取上传的文件对象，此处是一张图片对象让文件=文档。getelementbyid(' choose ').文件[0];让formData=new formData()；formData.append('avatar '，文件);//设置键为价值为上述的文件对象$.ajax({ type: 'POST '，url: '/profile '，data: formData，processData: false，success: function (data) { $(').newImg ').attr('src '，数据。file path)；//上传成功则图片显示}，错误：函数(错误){控制台。日志(错误。消息)；} })}/脚本/正文/htmldemo地址在这

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。