• NodeJS+axios上传图片


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

      

  • 相关阅读:
    Turtlebot-导航
    Turtlebot-创建地图-Gmapping-Kinect
    Gflags
    Linux Driver 入门
    Linux Kernel 入门
    Linux Driver 入门
    Linux Driver 入门
    Linux Driver 入门
    Win10 复制文件路径
    vs2010 nuget 基础连接已经关闭:发送时发生错误
  • 原文地址:https://www.cnblogs.com/wangxiayun/p/8116896.html
Copyright © 2020-2023  润新知