NodeJS+axios上傳圖片
阿新 • • 發佈:2017-12-26
sage esp .post req image pat headers target route
前端js部分
changeEvent (e) { ------ //change事件方法 let oFile = e.target.files[0] ------ //獲取文件對象 let param = new FormData() ------ //new一個formData param.append(‘file‘, oFile, oFile.name) ------ //將文件添加到formdata中 param.append(‘chunk‘, ‘0‘) let config = { headers: {‘Content-Type‘: ‘multipart/form-data‘} } this.axios.post(‘/api/upload/upavatar?username=‘ + username, param, config) ------//傳輸數據 .then(response => { if (response.data.data === 1) { ------ //成功後的回掉 let instance = Toast({ message: ‘頭像更改成功‘ }) setTimeout(() => { instance.close() }, 1000) } }) }
NodeJS部分
需要引入formidable、path模塊
router.post(‘/upavatar‘, function (req, res, next) { var form = new formidable.IncomingForm() form.uploadDir = path.normalize(__dirname + ‘/../public/images/avatar‘) ------圖片上傳目錄 form.parse(req, function (err, fields, files) { var oldpath = files.file.path var newpath = path.normalize(__dirname + ‘/../public/images/avatar‘) + ‘\\‘ + req.query.username + ‘.png‘ -------//給上傳的圖片重命名 fs.rename(oldpath, newpath, function (err) { if (err) { res.send(‘-1‘) return } if (newpath) { let avatarPath = ‘server/public/images/avatar/‘ + req.query.username + ‘.png‘ ------//存入數據庫的圖片地址(相對於頁面) db.updateMany(‘users‘, {‘username‘: req.query.username}, {$set: {avatar: avatarPath}}, function (err, result) { ------//更新數據庫的頭像地址 if (err) { res.send(‘-2‘) return } res.json({data: 1}) }) } }) }) })
NodeJS+axios上傳圖片