博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
NodeJS+axios上传图片
阅读量:2577 次
发布时间:2019-05-11

本文共 1704 字,大约阅读时间需要 5 分钟。

前端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})        })      }    })  })})

  

转载于:https://www.cnblogs.com/wangxiayun/p/8116896.html

你可能感兴趣的文章
PL/SQL学习笔记
查看>>
如何分析SQL语句
查看>>
结构化查询语言(SQL)原理
查看>>
SQL教程之嵌套SELECT语句
查看>>
几个简单的SQL例子
查看>>
日本語の記号の読み方
查看>>
计算机英语编程中一些单词
查看>>
JavaScript 经典例子
查看>>
判断数据的JS代码
查看>>
js按键事件说明
查看>>
AJAX 初次体验!推荐刚学看这个满好的!
查看>>
AJAX 设计制作 在公司弄的 非得要做出这个养的 真晕!
查看>>
Linux 查看文件大小
查看>>
Java并发编程:线程池的使用
查看>>
redis单机及其集群的搭建
查看>>
Java多线程学习
查看>>
检查Linux服务器性能
查看>>
Java 8新的时间日期库
查看>>
Chrome开发者工具
查看>>
【LEETCODE】102-Binary Tree Level Order Traversal
查看>>