表达为：4.13.1多部分： 4.1.2

代码主要实现本地图片上传到nodejs服务器的文件下，通过取图片路径进行图片预览

写在前面：计划实现图片上传预览功能，但是本地图片上传所获得路径为C:fakepath '文件名的形式，得不到文件真实路径，所以无法直接预览，于是采用将图片上传至服务器，传回服务器路径，实现预览。前端采用通过创建交互式、快速动态网页应用的网页开发技术方式上传文件，使用表单数据进行创建交互式、快速动态网页应用的网页开发技术请求，nodejs端采用多党的模块

相关查看文档：

通过埃阿斯方式上传文件，使用表单数据进行埃阿斯请求

节点多方开源代码库

表单数据-网络应用程序接口

部分代码：

表单名称='picForm '操作=' javascript: '方法=“发布”PE=“多部分/表单数据”输入类型=' file ' id=' test ' id=' j _ imgfile '/formdiv img src=' http : ' id=' j _ imgPic '/div js中采用变化事件，即当选完图片时就发送创建交互式、快速动态网页应用的网页开发技术请求

$('#j_imgfile ').on('change '，function(){ //判断上传文件类型var objFile=$('#j_imgfile ').val()；var Objtype=ObjFIle。子字符串(ObjFIle。LastIndexof(' . '))).toLowerCase()；var表单数据=新表单数据(文档。表格。named item(' picForm ')；控制台。日志(Objtype)；if(！(objType==' .jpg'||objType==' .png '){ alert('请上传jpg、png类型图片');返回false}else{ $ .ajax({ type : 'post '，URL : '/uploadusermpre '，data: formData，processData:false，async:false，cache: false，contentType: false，success 3360 function(re){ re。imgsrc=re。imgsrc。替换(' public '，' ')；re。imgsrc=re。imgsrc。替换(/ /g，/')；$('#j_imgPic ').attr('src '，re。img src)；}，错误：函数(re){ console。日志(re)；} });} });nodejs app.js里代码

app。post('/uploadusermpre '，路由。用户。uploadusermpre)；路线/用户。射流研究…里代码

出口。uploadusermgpre=函数(req，res，next) { //生成多党的对象，并配置上传目标路径var形式=新多方。表单({uploadDir: ' ./public/file/images ' })；form.parse(req，function(err，fields，file){ var filesTmp=JSON。stringify(文件)；if(err){ console。日志('解析错误： ' err)；} else { TestJSon=eval('(' filestmP ')')；控制台。日志(TestJSon。文件字段[0]).路径);RES . JSON({ imgsrc : testjson。文件字段[0]).path}) console.log('重命名为ok’)；} });}部分说明：

文件上传至服务器后路径小路变为：公共文件图像W-jy9YsxsPjNpQHslzGvdXBk.jpg

由于在app.js中设置过公众的为默认路径，所以整理地址时需要去掉公共的，并且把''变成'/'

app。使用(快递。静态(路径。join(_ _ dirname，' public '))；最后效果大概是这样的，html部分不一样~我的是翡翠模板，还有钢性铸铁什么的，并木有列出来

点击空白处，上传图片，接下来的功能就是点击上传把地址放到数据库里~(这个功能还木有做呢)

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