精华内容
下载资源
问答
  • // fileName就是上传文件的文件名 cb(null, fileName) } }) }) 上传头像接口 //.single(fieldname) //接受名称为fieldname的单个文件并存储在req.file中 //所以上传组件的name要和fieldname相同 router.post('/...

    官网

    multer官网

    安装

    multer安装

    npm install --save multer

    配置中用到的模块安装

    const fs = require(‘fs’)
    const path = require(‘path’)

    配置multer

    let upload = multer({
      storage: multer.diskStorage({
        // 设置文件存储位置
        destination: function(req, file, cb) {
          let date = new Date()
          let year = date.getFullYear()
          let month = (date.getMonth() + 1).toString().padStart(2, '0')
          let day = date.getDate()
    	  //__dirname 总是指向被执行 js 文件的绝对路径
          let dir = path.join(__dirname, '../public/uploads/' + year + month + day)
    
          // 判断目录是否存在,没有则创建
          if (!fs.existsSync(dir)) {
            fs.mkdirSync(dir, {
              recursive: true
            })
          }
    
          // dir就是上传文件存放的目录
          cb(null, dir)
        },
        // 设置文件名称
        filename: function(req, file, cb) {
          let fileName = Date.now() + path.extname(file.originalname)
          // fileName就是上传文件的文件名
          cb(null, fileName)
        }
      })
    })
    

    上传头像接口

    //.single(fieldname)
    //接受名称为fieldname的单个文件并存储在req.file中
    //所以上传组件的name要和fieldname相同
    router.post('/upload',upload.single('head_img'),async(req,res,next) => {
    //获取项目路径并用split以public分为两个数组
    //例如F:\test\node\Blog\server\public\uploads\20200817\1597660492051.jpg分为
    //F:\test\node\Blog\server\    和    \uploads\20200817\1597660492051.jpg
     let imgPath = req.file.path.split('public')[1]
     let imgUrl = 'http://127.0.0.1:3000'+imgPath
     res.send({code:0,msg:'上传成功',data:imgUrl})
    })
    

    上传组件配置

      <el-form :model="form" ref="form" label-width="80px">
          <el-form-item label="昵称">
            <el-input v-model="form.nickname" class="nickname"></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-upload class="avatar-uploader" action="http://127.0.0.1:3000/api/user/upload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" name="head_img">
              <img :src="imageUrl!=null?imageUrl:imgDefault" class="avatar">
            </el-upload>
            <p class="tips">tips:请上传2M以内JPG/PNG格式的图片,比例最好1:1</p>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="signOut">退出登录</el-button>
          </el-form-item>
        </el-form>
    

    组件方法

    import imgDefault from '../assets/logo.png'
    export default {
      data() {
        return {
          form: {
            nickname: this.nickname
          },
          imageUrl: null,
          imgDefault: imgDefault
        }
      },
      methods: {
        save() {
        //接口/api/user/updateUser为重新获取本页面需要的值的接口(注意不能带密码)
          this.$axios.post('/api/user/updateUser', {
            nickname: this.form.nickname,
            head_img: this.imageUrl
          }).then(res => {
            console.log(res)
            if (res.data.code === 0) {
              this.$message({
                message: '更新成功',
                type: 'success'
              });
              setTimeout(() => {
                location.reload()
              }, 1500)
            }
          }).catch(e => {
            console.log(e)
          })
        },
        handleAvatarSuccess(res) {
          //提交成功
          this.imageUrl = res.data
        },
        beforeAvatarUpload(file) {
          //提交前
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;
    
          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        }
       }
      }
    
    展开全文
  • -- 这里的input只用来上传头像,没在表单中 --> 上传头像</button><br> <br> // 使用ajax上传头像 //1.得到dom对象 var imga = document.getElementById('imga') var filea = document....
    /*登录注册项目:连接数据库
    
     node.js --- v6.6.0
     express --- v4.14.0
     path --- v0.12.7
     mongodb --- v2.2.11
     cookie-parser --- v1.4.3
     body-parser ---v1.15.2
    */


    //第一步:安装,引入,相关模块,创建app对象,监听端口
    var express = require('express')
    var path = require('path')
    var bp = require('body-parser')
    var cookie = require('cookie-parser')
    var mongo = require('mongodb')
    var ejs = require('ejs')


    //4.1引入路由文件
    var router = require('./router/router.js')




    var app = express()


    app.set('view engine','ejs')
    app.set('views',path.join(__dirname,'views'))
    app.engine('html',ejs.renderFile)




    //第二步 创建public文件,并设置静态路径
    app.use(express.static(path.join(__dirname,'public')))


    //第三步 使用body-parser和cookie-parser中间件
    app.use(bp.urlencoded( { extended:false } ))
    app.use(cookie())


    //第四步,创建路由router文件夹,然后创建路由文件,在4.1步中引入文件,4.2步使用中间件
    //4.2 使用router中间件
    app.use(router)










    app.listen(3001);



    //第一步:创建router.js文件,使用express框架,建立router对象
    var express = require('express')
    var router = express.Router()
    var fs = require('fs')


    var formidable = require('formidable')


    //连接数据库第一步
    var mongoClient = require('mongodb').MongoClient//新写法
    var mUrl = 'mongodb://localhost:27017/UserDb'




    var path = require('path')


    //************定义全局变量**************//
    // 让注册的用户,与上传的头像联系起来
    var USER = null


    //第二步:使用router对象接受post或者get请求
    //2.1创建主页面,接受主页面请求
    router.get('/',function(req,res){
    res.sendFile(path.join(__dirname,'../index.html'))//当前文件没path,故引入
    })
    //2.2接受登录页面
    router.get('/login',function(req,res){
    res.sendFile(path.join(__dirname,'../login.html'))
    })


    //2.3接收注册页面
    router.get('/register',function(req,res){
    res.sendFile(path.join(__dirname,'../register.html'))
    })


    //2.4接收登录post
    router.post('/login',function(req,res){
    //第四步,在登录页面登录与数据库中的内容进行匹配,还是连接数据库
    mongoClient.connect(mUrl,function(err,db){
    if(!err){
    db.collection('userInfo',function(err,col){
    //第五步:查询数据库并返回cursor对象。
    //因为用户名在网站中是唯一的,所以使用用户名来查询数据
    var cursor = col.find({'user':req.body.user})
    //第六步:把cursor转化为数组,并操作
    cursor.toArray(function(err,items){//toArray就是把找到的数据放入items这个数组中
    //6.1,如果输入的用户名不存在
    console.log(items)
    if( items.length === 0 ){
    res.send('您输入的用户名不存在')
    db.close()
    //6.2 如果输入的用户名和密码 与数据库中的密码匹配,则放回登录成功
    } else if (items[0].user === req.body.user && items[0].pwd === req.body.pwd){
    // res.sendFile(path.join(__dirname,'tou.html'))
    //注册的是谁,就要找到谁的头像的url路径
    var tou = items[0].iconUrl
    res.render('tou.html',{imgUrl:tou})
    db.close()
    //6.3 如果不匹配
    } else {
    res.send('用户名和密码不匹配')
    db.close()
    }
    })
    })
    }
    })
    })


    //2.5接收注册post
    router.post('/register',function(req,res){
    //得到ajax的上传头像,应该存放到哪里??????




    //!!!!因为在首次注册的时候,要连接数据库,所以在此出现数据库连接步骤
    //第一步:引入mongodb,并创建url
    //第二步:运行mongodb服务程序,创建需要的数据库
    //2.1 运行mongod 2.1 运行mongo操作数据库
    //第三步:连接数据库
    mongoClient.connect(mUrl,function(err,db){
    if(!err){
    db.collection('userInfo',function(err,col){
    if(!err){
    //项目已经完毕,加上如果注册用户名自已经存在,则方法用户名以存在
    var cursor = col.find({'user':req.body.user})
    cursor.toArray(function(err,items){
    if (items.length === 0 ){
    //第四步,向数据库中插入注册数据
    col.insert({'user':req.body.user,'pwd':req.body.pwd1,'email':req.body.email,'mobile':req.body.mobile})
    //res.send('注册成功')
    // 如果注册成功,则放回上传头像的页面
    /*******下面的这个user就是你注册的user*****/
    USER = req.body.user 
    res.sendFile(path.join(__dirname,'../icon.html'))
    db.close()//一定要注意:连接数据库后,执行完任务,要对数据库关闭
    } else {
    res.send('用户名自已经存在')
    db.close()
    }
    })



    }
    })
    }
    })




    })
    //处理上传的头像
    router.post('/icon',function(req,res){
    var form = new formidable.IncomingForm()
    // 设置要上传的位置
    form.uploadDir = path.join(__dirname,'../public/uploads')
    form.parse(req)


    form.on('end',function(){
    console.log('success')
    })


    form.on('file',function(field,file){
    /*********此行代码一定要加入,就是给文件改名字***********/
    fs.renameSync(file.path,path.join(form.uploadDir,file.name))
    //path.join中的file是回调函数中的file
    //改玩名字以后,把相应的路径存放到数据库。
    //要存放到数据库,就要连接数据库
    mongoClient.connect(mUrl,function(err,db){
    if(!err){
    db.collection('userInfo',function(err,col){
    col.update({'user':USER},{$set:{'iconUrl':file.name}},function(err,result){
    res.send('头像上传成功')
    })

    //得到了数据库的userInfo,也就是集合,如何才能把图像路径,存放到对应用户名字的文档中
    })
          }
      })


    })
    })




    //第三步:曝光router对象,以便其他文件引用。
    module.exports = router




    //头像上传的写法要分开,,使用ajax

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <!-- 为注册页面添加头像 -->
    <img id = 'imga' src='./img/touxiang.png' /> <br><br>
    <input type='file' id='filea' /> <br><br><!-- 这里的input只用来上传头像,没在表单中 -->
    <button id='buta'>上传头像</button><br><br><br><br>
    <script type="text/javascript">
    // 使用ajax上传头像
    //1.得到dom对象
    var imga = document.getElementById('imga')
    var filea = document.getElementById('filea')
    var buta = document.getElementById('buta')


    //根据项目可知,是在点击button时,才进行头像上传,故使用onclick方法
    buta.onclick = function(){
    //点击后,是获得我们的头像,并对头像进行格式化
    //1.得到相应文件
    var getData = filea.files[0]
    //2.创建formatdata进行格式化
    var fd = new FormData()
    //3.把我们要上传的文件,变成键值对,使用append方法
       fd.append('imageIcon',getData)


       //使用ajax上传,共4步
       //1.
       var xhr = new XMLHttpRequest()
       //2.
       xhr.open('POST','/icon',true)
       //3.
       xhr.send(fd)
       //4.
       xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
        console.log('上传成功')
        }
       }
    }
    buta.οnclick=function(){
    var getData=filea.file[0]
    var fd=mew FormData()
    fd.append('imageIcon',getData)
    var xhr=new XMLHttpRequest()
    xhr.open()
    xhr.send(fd)
    xhr.onreadystatechange=function(){
    if (xhr.readyState===4) {
    console.log('上传成功')
    };
    }


    }




    </script>


    </body>
    </html>




    //一定注意引入路径是相对路径还是绝对路径

    展开全文
  • 一切从简... ... 显示头像 <img v-bind:src='"../../../static/uploads/"+avatar' alt=""> 修改头像 @change是上传文件时点击确定的一刻触发,$event是事件对象 <input type="file" @chang...

    一切从简...

    前端页面

    <template>
     显示头像
            <img v-bind:src='"../../../static/uploads/"+avatar' alt="">
     修改头像  @change是上传文件时点击确定的一刻触发,$event是事件对象
           <input type="file" @change="getFile($event)">
     
    </template>
    <script>
    export default {
        mounted() {
            this.init();
        },
        methods: {、
    这个接口是获取用户信息的 init() {
    this.$http.get('/api//user/personal', { }).then((response) => { var res = response.data; this.username = res.username this.avatar = res.avatar }) }, getFile(event) { this.file = event.target.files[0]; //获取上传元素信息 var that = this event.preventDefault();
    // 只能通过formData方式来传输文件
    var formData = new FormData(); formData.append('file', this.file);
    let config
    = { headers: { 'Content-Type': 'multipart/form-data' } } this.$http.post('/api/image', formData, config).then(function(res) { console.log(res.data.code) if (res.data.code == '0') { /*这里做处理*/ that.init(); // 给avatar赋上新的值,否则要刷新获取 } }) }, }, data() { return { avatar: '', } } } </script>

    美化一下

    <style>
    input {
        font-size: 0;
        /* 为了去掉‘未选择任何文件’这几个字,也可以随便弄到哪里*/
    }
    
    
    /* 注意不是直接input > input[type=button] 哦*/
    
    input::-webkit-file-upload-button {
        background: #efeeee;
        color: #333;
        border: 0;
        padding: 4px;
        border-radius: 5px;
        font-size: 12px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, .1), 0 0 10px rgba(0, 0, 0, .12);
    }
    </style>

    后端接口

    var formidable = require('formidable'); //上传功能的插件
    var path = require('path')
    var fs = require("fs");
    
    
    router.post('/image', (req, res, next) => {
      //上传文件只能通过这个插件接收  file是上传文件 fields是其他的
      var form = new formidable.IncomingForm();
      form.uploadDir = path.join(__dirname, '../../static/'); //文件保存的临时目录为static文件夹(文件夹不存在会报错,一会接受的file中的path就是这个)
      form.maxFieldsSize = 1 * 1024 * 1024; //用户头像大小限制为最大1M    
      form.keepExtensions = true; //使用文件的原扩展名  
      form.parse(req, function (err, fields, file) {
        var filePath = '';
        //如果提交文件的form中将上传文件的input名设置为tmpFile,就从tmpFile中取上传文件。否则取for in循环第一个上传的文件。  
        if (file.tmpFile) {
          filePath = file.tmpFile.path;
        } else {
          for (var key in file) {
            if (file[key].path && filePath === '') {
              filePath = file[key].path;
              break;
            }
          }
        }
        //文件移动的目录文件夹,不存在时创建目标文件夹  
        var targetDir = path.join(__dirname, '../../static/uploads');
        if (!fs.existsSync(targetDir)) {
          fs.mkdir(targetDir);
        }
        var fileExt = filePath.substring(filePath.lastIndexOf('.'));
        //判断文件类型是否允许上传  
        if (('.jpg.jpeg.png.gif').indexOf(fileExt.toLowerCase()) === -1) {
          var err = new Error('此文件类型不允许上传');
          res.json({
            code: -1,
            message: '此文件类型不允许上传'
          });
        } else {
          //以当前时间戳对上传文件进行重命名  
          var fileName = new Date().getTime() + fileExt;
          var targetFile = path.join(targetDir, fileName);
          //移动文件  
          fs.rename(filePath, targetFile, function (err) {
            if (err) {
              console.info(err);
              res.json({
                code: -1,
                message: '操作失败'
              });
            } else {
              User.update({
                username: req.cookies.username
              }, {
                avatar: fileName
              }, (err2, doc2) => {
    
                //上传成功,返回文件的相对路径  
                // var fileUrl = '/static/upload/' + fileName;
                res.json({
                  code: 0,
                  fileUrl: fileName
                });
              })
    
            }
          });
        }
      });
    })

     

    转载于:https://www.cnblogs.com/wuyushuo/p/7478996.html

    展开全文
  • 最近在项目中遇到了一个挺棘手的问题:页面无刷新修改头像。头疼了很久,上网找了很久,终于找到了解决办法,可以在express框架中在请求一个fs模块,动态的去创建地址和改变图片命名。 ajax推荐使用jq的ajax方法,...

    最近在项目中遇到了一个挺棘手的问题:页面无刷新修改头像。头疼了很久,上网找了很久,终于找到了解决办法,可以在express框架中在请求一个fs模块,动态的去创建地址和改变图片命名。

    ajax推荐使用jq的ajax方法,其中contentType、processData两个选项必须将参数设置为false。

    而NodeJS服务端保存需要使用了第三方插件node-formidable,npm安装:npm install formidable --save

    路由代码如下:

    var express = require('express');
    var router = express.Router();
    var fs = require('fs');
    var formidable = require('formidable');
    var cacheFolder = 'public/images/';
    
    router.post('/',  function ( req, res,next ) {
      var userDirPath =cacheFolder+ "Img";
      if (!fs.existsSync(userDirPath)) {
          fs.mkdirSync(userDirPath);
      }
      var form = new formidable.IncomingForm(); //创建上传表单
      form.encoding = 'utf-8'; //设置编辑
      form.uploadDir = userDirPath; //设置上传目录
      form.keepExtensions = true; //保留后缀
      form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
      form.type = true;
      var displayUrl;
      form.parse(req, function(err, fields, files) {
          if (err) {
             return res.json(err);
          }
          var extName = ''; //后缀名
          switch (files.upload.type) {
              case 'image/pjpeg':
                  extName = 'jpg';
                  break;
              case 'image/jpeg':
                  extName = 'jpg';
                  break;
              case 'image/png':
                  extName = 'png';
                  break;
              case 'image/x-png':
                  extName = 'png';
                  break;
          }
          if (extName.length === 0) {
              return  res.json({
                  msg: '只支持png和jpg格式图片'
              });
          } else {
              var avatarName = '/' + Date.now() + '.' + extName;
              var newPath = form.uploadDir + avatarName;
              fs.renameSync(files.upload.path, newPath); //重命名
              return res.json(true);
          }
      });
    });
    
    module.exports = router;
    

    感谢原文作者:http://www.tuicool.com/articles/Z7rIzmJ  

    转载于:https://www.cnblogs.com/sxcflyhigher/p/6435105.html

    展开全文
  • H5-mui+nodejs+mysql上传存储头像实现 关于h5移动应用开发,但凡有账户的项目都需要实现上传头像的功能 之前写课业小项目的时候在网上找了很久都没找到合适的,所以解决了这个问题后整理了一下课业小项目的部分...
  • nodeJs

    2019-10-04 17:23:32
    nodeJs 01 创建web服务器 1.1 服务器响应前端 const http = require('http'); const server = http.createServer((req,res) => { //设置响应头 响应内容类型 : 纯文件 ; 文本格式utf8 res.writeHead(200,{'...
  • @[TOC](nodeJs(express) + vue) 1.node 安装插件 cnpm i multer -S 2.写一个上传问文件的input框 <div class="uploadimg"> <input class="fileInput" type="file" ref="file" @change="changeFile" />...
  • Nodejs

    2017-12-30 21:27:00
    学Node本质不是在学node,是在学服务器(web后台)编程 大前端时代:JavaScript语言...简单说nodejs就是运行在服务器端的JavaScript,利用JavaScript在服务端进行编程 node.js就是事件驱动、非阻塞I/O模型 nodej...
  • //用户头像 上传 渲染页面 router.get('/article', function (req, res) { res.render('article', { title: "上传头像", }) }) //上传头像接口 router.post('/file_upload', function (req, res) { ...
  • NodeJS中将字符转换为头像图像。 依存关系 开罗: ://cairographics.org/(libpng giflib freetype libpixman cairo) 演示版 安装 npm install char-to-avatar 原料药 var CharToAvatar = require ( 'char-to-...
  • 缩略图制作 var fs = require("fs"); var gm = require("gm"); gm('./01.jpg') .resize(50,50,"!...头像裁切 gm("./01.jpg").crop(width,height,x,y).write("./02.jpg",function(err){ })
  • 完整的问答系统效果图 ... 其中的类名用了bootstarp框架,各个类名的功能,请参照菜鸟教程 这里强调下路由的配置问题 , 一定要对应, ...重点:nodejs部分 首先配置要用的模块 接下来是注册的nodejs部...
  • NodeJS笔记

    2021-07-26 15:45:15
    一、NodeJS概述 1、介绍 相关网址: https://nodejs.org/zh-cn/ http://nodejs.cn/ Node.js 是一个开源与跨平台的JavaScript运行时环境。它是在浏览器外运行,它是一个事件驱动异步I/O单进程的服务端JS环境,...
  • nodejs-koa

    2021-03-20 18:11:03
    nodejs搭建koa后端
  • Nodejs 操作数据库

    万次阅读 2020-07-06 20:16:44
    Nodejs 操作数据库 nodejs操作数据库-增 // 导包 const express = require("express"); var mysql = require("mysql"); // 创建一个和数据库的连接 var connection = mysql.createConnection({ host: "localhost",...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,109
精华内容 843
关键字:

nodejs头像