zoukankan      html  css  js  c++  java
  • 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})
            })
          }
        })
      })
    })
    

      

  • 相关阅读:
    openssl windows ndk 编译----0
    openssl windows ndk 编译
    android Android NDK开发2之Windows及L下的gcc手动编译(交叉连编译
    list 和 set 的区别
    Arrays.toString()方法和Arrays类 的一些概念
    几个简单的面试题
    大脑记忆(自我总结)
    DI() T()函数
    Latex设置
    selenium获取元素信息的方法
  • 原文地址:https://www.cnblogs.com/wangxiayun/p/8116896.html
Copyright © 2011-2022 走看看