Express為：4.13.1 multyparty: 4.1.2
代碼主要實現本地圖片上傳到nodejs服務器的文件下，通過取圖片路徑進行圖片預覽
寫在前面：計劃實現圖片上傳預覽功能，但是本地圖片上傳所獲得路徑為 C:/fakepath/"+文件名的形式，得不到文件真實路徑，所以無法直接預覽，于是采用將圖片上傳至服務器，傳回服務器路徑，實現預覽。前端采用通過ajax方式上傳文件，使用FormData進行ajax請求 ，nodejs端采用multiparty模塊
相關查看文檔：
通過Ajax方式上傳文件，使用FormData進行Ajax請求
部分代碼：
<form name='picForm' action = "javascript:;"method="post" encype = "multipart/form-data" > <input type="file" id="test" id="j_imgfile"></form><div> <img src="" id="j_imgPic"></div>
js中采用change事件，即當選完圖片時就發送ajax請求
$('#j_imgfile').on('change',function(){ // 判斷上傳文件類型 var objFile = $('#j_imgfile').val(); var objType = objFile.substring(objFile.lastIndexOf(".")).toLowerCase(); var formData = new FormData(document.forms.namedItem("picForm")); console.log(objType); if(!(objType == '.jpg'||objType == '.png')) { alert("請上傳jpg、png類型圖片"); return false; }else{ $.ajax({ type : 'post', url : '/uploadUserImgPre', data: formData , processData:false, async:false, cache: false, contentType: false, success:function(re){ re.imgSrc = re.imgSrc.replace('public',''); re.imgSrc = re.imgSrc.replace(////g,'//'); $('#j_imgPic').attr('src',re.imgSrc); }, error:function(re){ console.log(re); } }); } });nodejs app.js里代碼
app.post('/uploadUserImgPre',routes.users.uploadUserImgPre);routes/users.js 里代碼
exports.uploadUserImgPre = function(req, res, next) { //生成multiparty對象，并配置上傳目標路徑 var form = new multiparty.Form({uploadDir: './public/files/images'}); form.parse(req, function(err, fields, files) { var filesTmp = JSON.stringify(files); if(err){ console.log('parse error: ' + err); } else { testJson = eval("(" + filesTmp+ ")"); console.log(testJson.fileField[0].path); res.json({imgSrc:testJson.fileField[0].path}) console.log('rename ok'); } });}部分說明：
文件上傳至服務器后 路徑path變為：public/files/images/W-jy9YsxsPjNpQHslzGvdXBk.jpg
由于在app.js中設置過public為默認路徑，所以整理地址時需要去掉public，并且把‘/'變成‘/'
app.use(express.static(path.join(__dirname, 'public')));
最后效果大概是這樣的，html部分不一樣~我的是jade模板，還有css什么的，并木有列出來
點擊空白處，上傳圖片，接下來的功能就是點擊上傳把地址放到數據庫里~（這個功能還木有做呢）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
