Front-End JS section
ChangeEvent (e) { ------ //change Event method let ofile = e.target.files[0] ------ //Get File Object let param = new FormData () ------ //new a FormData param.append (' file ', ofile, ofile.name) ------ / /Add File to Formdata param.append (' chunk ', ' 0 ') let config = { headers: {' content-type ': ' multipart/ Form-data '} } this.axios.post ('/api/upload/upavatar?username= ' + username, param, config)------//Transfer data . Then (response = { = = = 1) { ------//After successful rollback let instance = Toast ({ Message: ' Avatar changed successfully ' } setTimeout (() = { instance.close () }, +)} )}
Nodejs part needs to introduce formidable, path module
Router.post ('/upavatar ', function (req, res, next) { var form = new Formidable. Incomingform () form.uploaddir = path.normalize (__dirname + '/... /public/images/avatar ')------image upload Directory form.parse (req, Function (Err, fields, files) { var oldpath = Files.file.path var NewPath = path.normalize (__dirname + '/... /public/images/avatar ') + ' \ \ ' + Req.query.username + '. png ' -------//Rename the uploaded image fs.rename (OldPath, NewPath, function (err) { if (err) { res.send ('-1 ') return } if (NewPath) {let Avatarpath = ' server/ public/images/avatar/' + Req.query.username + '. png ' ------//The image address of the database (relative to the page) db.updatemany (' users ', {' Username ': Req.query.username}, {$set: {Avatar:avatarpath}}, function (err, result) { ------//Update the database's avatar address if (ERR) { res.send ('-2 ') return } Res.json ({data:1} )})})
Nodejs+axios Uploading pictures