利用nodeJS+vue图片上传实现更新头像的过程

目录
  • 思路:
  • 1、前端准备
  • 2、node后端服务
  • 总结

思路:

前端通过el-upload将图片传给后端服务,后端通过formidable中间件解析图片,生成图片到静态资源文件夹下(方便前端直接访问),并将图片路径返回给前端,前端拿到图片路径即可渲染头像。

1、前端准备

前端采用vue的el-upload组件,具体用法见官方API。使用代码如下

<!--头像上传-->
<el-upload
  class="avatar-uploader"
  action="http://localhost:3007/api/upload"
  :data= this.avatarForm
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="avatar-uploader-icon">点击修改头像</i>
</el-upload>

action:必选参数,上传的地址,这里是http://localhost:3007/api/upload 表示后端服务地址

before-upload:上传文件之前的钩子,主要用于文件上传前的校验,可以限制文件上传的大小及格式。这里设置头像只能上传png、jpg格式,图片大小不能超过2M,具体设置方法如下:

beforeAvatarUpload(file) {
  console.log(file.type)
  const isJPG = file.type === 'image/jpeg'
  const isPNG = file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!(isJPG || isPNG)) {
    this.$message.error('上传头像图片只能是 JPG 格式!')
  }
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!')
  }
  return (isPNG || isJPG) && isLt2M
}

on-success:文件上传成功时的钩子,这里接受图片路径成功后,拼接成正确的图片路径,并将路径赋值给src,具体如下:

handleAvatarSuccess(res, file) {
  if (res.status === '1') return this.$message.error(res.message)
  this.imageUrl = `http://localhost:3007/public/${res.srcurl}`  //拼接路径
  this.$message.success('修改头像成功')
}

data:上传时附带的额外参数.这里将用户名、用户ID传给后端服务,用于生成图片时拼接图片名,保证图片名唯一性,具体如下:

mounted() {
  this.name = window.sessionStorage.getItem('username')
  this.user_pic = window.sessionStorage.getItem('user_pic')
  this.user_id = window.sessionStorage.getItem('user_id')
  this.avatarForm = {
    name: this.name, // 用户名
    user_id: this.user_id // 用户ID
  }
  this.getUserAvata()
}

点击用户头像上传图片:

2、node后端服务

需要用到的依赖:

"dependencies": {
  "express": "^4.16.2",
  "cors": "^2.8.5",
  "formidable": "^1.1.1"
}

具体代码如下:

var express = require('express');
var app = express();

//引入数据库模块存储用户当前的头像地址
const db = require('../db/index');

// 设置运行跨域
const cors = require('cors')
app.use(cors())

// 处理图片文件中间件
var formidable = require("formidable");
fs = require("fs");

// 暴露静态资源
app.use('/public', express.static('public'));

// 上传图片服务
app.post('/upload', function (req, res) {
    var info = {};
    // 初始化处理文件对象
    var form = new formidable.IncomingForm();
    form.parse(req, function(error, fields, files) {
        if(error) {
            info.status = '1';
            info.message = '上传头像失败';
            res.send(info);
        }
        // fields 除了图片外的信息
        // files 图片信息
        console.log(fields);
        console.log(files);
        var user_id = parseInt(fields.user_id);
        var fullFileName = fields.name + user_id + files.file.name;// 拼接图片名称:用户名+用户ID+图片名称
        fs.writeFileSync(`public/${fullFileName}`, fs.readFileSync(files.file.path)); // 存储图片到public静态资源文件夹下

        // 更新用户当前头像地址信息
        const sql = 'update ev_users set user_pic = ? where id = ?';
        db.query(sql, [fullFileName, user_id], function (err, results) {
            // 执行 SQL 语句失败
            if (err) {
                info.status = '1';
                info.message = '上传失败';
                return (info)
            }
            info.status = '0';
            info.message = 'success';
            info.srcurl = fullFileName;
            res.send(info);
        });
    });
});

var server = app.listen(3007, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('Example app listening at http://localhost:%s', port);
});

分析:通过express创建端口号为3007的服务。引入formidable中间件存储图片,存储后将图片路径返回给前端。并将用户头像路径信息存入用户表,和用户绑定,这样每次用户登录后就能得到当前用户的头像路径信息,从而渲染自己的头像。formidable解析后,得到用户上传的信息:fields除了图片外的信息,files图片信息。

上传后的效果:

总结

到此这篇关于利用nodeJS+vue图片上传的文章就介绍到这了,更多相关nodeJS vue图片上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

    本文实例讲述了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能.分享给大家供大家参考,具体如下: 公司要写一些为自身业务量身定制的的组件,要基于Vue,写完后扩展了一下功能,选择写图片上传是因为自己之前一直对这个功能比较迷糊,所以这次好好了解了一下.演示在网址打开后的show.gif中. 使用技术:Vue.js | node.js | express | MongoDB. github网址:https://github.com/neroneroffy/privat

  • vue+node实现图片上传及预览的示例方法

    本文介绍了vue+node实现图片上传及预览的示例方法,分享给大家,具体如下: 先上效果图 上代码 html部分主要是借助了weui的样式 <template> <div> <myheader :title="'发布动态'"> <i class="iconfont icon-fanhui1 left" slot="left" @click="goback"></i>

  • 利用nodeJS+vue图片上传实现更新头像的过程

    目录 思路: 1.前端准备 2.node后端服务 总结 思路: 前端通过el-upload将图片传给后端服务,后端通过formidable中间件解析图片,生成图片到静态资源文件夹下(方便前端直接访问),并将图片路径返回给前端,前端拿到图片路径即可渲染头像. 1.前端准备 前端采用vue的el-upload组件,具体用法见官方API.使用代码如下 <!--头像上传--> <el-upload class="avatar-uploader" action="ht

  • Nodejs实现图片上传、压缩预览、定时删除功能

    前言 我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番. 第一步,node基本配置 这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力.更健壮的web框架. 1.引入基本配置 const Koa = require('koa');// koa框架 const Router = require('koa-router');// 接口必备 const cors = require('koa2-cors'); // 跨域必备 const tinify =

  • vue图片上传组件使用详解

    vue图片上传组件,供大家参考,具体内容如下 最近在做项目的时候顺便补充了一下公司项目的公共组件库,刚刚手头事情告一段落,就来做个笔记. 首先来看看最终效果 1.不允许删除 2.允许用户删除(显示删除按钮) 实现的效果就是上图显示内容 接下来说说组件布局那部分直接上代码了 <template> <div class="uploadImg"> <div class="upload-content"> <div class=&q

  • angular2+nodejs实现图片上传功能

    在使用angular2进行图片上传的时候,遇到了各种各样的问题.在多番尝试之后最终成功上传图片,下面将我的方法分享给大家: nodejs 后台代码 var express = require("express"); //网络请求模块 var request = require("request"); //引入nodejs文件系统模块 const fs = require('fs'); //引入body-parser //包含在请求正文中提交的键/值对数据. //默认

  • ajax +NodeJS 实现图片上传实例

    前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传.这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接"拿来"用 note(注意) 大家先在public目录下创建一个名为uploads的文件夹,这个文件夹是用来保存你上传过的图片 安装multer模块: npm i -S multer code(代码) 1.app.js const express = require('express'); const multer = requi

  • 详解vue 图片上传功能

    这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'> <img :src="item"> </li> <li style="position:relative

  • vue图片上传本地预览组件使用详解

    最近项目一直在使用vue,以前只是用vue做过一些简单的demo对数据进行增删改,并没有用于实际开发项目.今天就想了解一下如何用vue实现常见的图片上传前本地预览效果. 效果预览: <template> <div class="image-view"> <div class="addbox"> <input type="file" @change="getImgBase()">

  • NodeJS实现图片上传代码(Express)

    文件上传是每个网站不可避免的,最近需要做些上传图片的功能,主要解决两个问题,一个是文件上传样式和服务端路径保存,功能很简单,做起来倒是没那么简单,先从最简单的页面的上传页面的样式开始. 页面样式 Html页面默认的上传的是比较难看的,需要重做一个背景图片,通过背景图片添加上传的图片: 上传图片样式: <div class="upload-container"> <input type="file" name="fileToUpload&q

  • Vue formData实现图片上传

    本文实例为大家分享了Vue formData实现图片上传的具体代码,供大家参考,具体内容如下 import Vue from 'vue' /** * 图片上传 * 已注入所有Vue实例, * template模板里调用 $uploadFile(id) * 组件方法里调用 this.$uploadFile(id) */ const uploadFile = (id) => { let promise = new Promise((resolve, reject) => { let file =

  • Java Struts图片上传至指定文件夹并显示图片功能

    继上一次利用Servlet实现图片上传,这次利用基于MVC的Struts框架,封装了Servlet并简化了JSP页面跳转. JSP上传页面 上传一定要为form加上enctype="multipart/form-data",表示提交的数据时二进制的 并且必须是method="post" <%@ page language="java" contentType="text/html; charset=utf-8" page

随机推荐