1. node之本地服务器图片上传的方法示例

     更新时间:2019年03月26日 11:08:01   作者:ZJW0215   我要评论

    这篇文章主要介绍了node之本地服务器图片上传的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    在自己做一个简单的后台管理系统时,用的是node作本地数据库,然后用了Element-ui的upload组件来实现图片的上传,中间有遇到那么点小坑,这里记录下,比较坑的一点就是,不知道文件的命名不能带空格,然后改了好久

    1.index.vue文件

    这里的话,就是简单点的使用图形界面框架Element-ui的上传组件,然后,action就是服务器端的地址,我这里使用了代理,将localhost:8080代理到你使用node作为服务器的地址就可以了

    <template>
      <div class="avatar">
       <img
        :src="avatar?avatar:defaultImg"
       />
      </div>
      <el-upload
       class="upload-demo"
       drag
       action="http://localhost:8080/api/upload"
       :show-file-list="false"
       :on-success="uploadImgSuccess"
      >
       <i class="el-icon-upload"></i>
       <div class="el-upload__text">将文件?#31995;?#27492;处,或<em>点击上传</em></div>
      </el-upload>
    </template>
    <script>
    import defaultImg from '@/assets/img/avatar.png'
    export default{
      data() {
        return {
          avatar: ''
        }
      },
      methods: {
        uploadImgSuccess(res) {
          this.avatar = res.result.url;
        }
      }
    }
    </script>
    

    2.代理文件

    我这里使用的是vue-cli3脚手架来搭建的项目,所以,自己在项目的根目录下创建一个vue.config.js来做一些配置

    module.exports = {
     devServer: {
      port: 8080,
      headers: {
      },
      inline: true,
      overlay: true,
      stats: 'errors-only',
      proxy: {
       '/api': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true // 是否跨域
       }
      }
     },
    };
    

    3.node服务器端文件

    这里很重要的一点就是设置静态资源目录

    app.use('/serverImage', express.static(path.join(__dirname, 'serverImage')));

    对图片上传进行了方法的封装

    const fs = require('fs');
    const path = require('path');
    /* formidable用于解析表单数据,特别是文件上传 */
    const formidable = require('formidable');
    /* 用于时间格式化 */
    const formatTime = require('silly-datetime');
    
    /* 图片上传 */
    module.exports = (req, res) => {
     /* 创建上传表单 */
     let form = new formidable.IncomingForm();
     /* 设置编码格式 */
     form.encoding = 'utf-8';
     /* 设置上传目录(这个目录必须先创建好) */
     form.uploadDir = path.join(__dirname, '../serverImage');
     /* 保留文件后缀名 */
     form.keepExtensions = true;
     /* 设置文件大小 */
     form.maxFieldsSize = 2 * 1024 *1024;
    
     /* 格式化form数据 */
     form.parse(req, (err, fields, files) => {
      let file = files.file;
      /* 如果出错,则拦截 */
      if(err) {
       return res.send({'status': 500, msg: '服务器内部错误', result: ''});
      }
    
      if(file.size > form.maxFieldsSize) {
       fs.unlink(file.path);
       return res.send({'status': -1, 'msg': '图片不能超过2M', result: ''});
      }
    
      /* 存储后缀名 */
      let extName = '';
    
      switch (file.type) {
       case 'image/png':
        extName = 'png';
        break;
       case 'image/x-png':
        extName = 'png';
        break;
       case 'image/jpg':
        extName = 'jpg';
        break;
       case 'image/jpeg':
        extName = 'jpg';
        break;
      }
      if(extName.length == 0) {
       return res.send({'status': -1, 'msg': '只支持jpg和png格式图片', result: ''});
      }
    
      /* 拼接新的文件名 */
      let time = formatTime.format(new Date(), 'YYYYMMDDHHmmss');
      let num = Math.floor(Math.random() * 8999 + 10000);
      let imageName = `${time}_${num}.${extName}`;
      let newPath = form.uploadDir + '/' + imageName;
    
      /* 更改名字和路径 */
      fs.rename(file.path, newPath, (err) => {
       if(err) {
        return res.send({'status': -1, 'msg': '图片上传失败', result: ''});
       } else {
        return res.send({'status': 200, 'msg': '图片上传成功', result: {url: `http://localhost:3000/serverImage/${imageName}`}});
       }
      })
     })
    };

    方法的调用

    const express = require('express');
    const router = express.Router();
    const uploadImg = require('./uploadImg');
    
    /* 上传图片 */
    router.post('/upload', (req, res) => {
     uploadImg(req, res);
    });
    
    module.exports = router;

    服务器端入口文件

    const express = require('express');
    const app = express();
    const path = require('path');
    /* body-parser是一个HTTP请求体解析的中间件
     * 使用这个模块可以解析JSON、Raw、文本、URL-encoded格式的请求体
     * */
    const bodyParser = require("body-parser");
    
    const dataBaseOperate = require('./database/operate');
    
    /* 以application/json格式解析数据 */
    app.use(bodyParser.json());
    /* 以application/x-www-form-urlencoded格式解析数据 */
    app.use(bodyParser.urlencoded({ extended: false }));
    
    /* 设置静态资源目录 */
    app.use('/serverImage', express.static(path.join(__dirname, 'serverImage')));
    
    app.use('/api', dataBaseOperate);
    
    
    app.listen(3000, () => {
     console.log('server is listening to http://localhost:3000')
    });
    
    

    4.小结

    对于接口文件的返回,这里使用了body-parser这个中间件来对node返回的body进行json格式的解析

    很重要的一点就是设置静态资源目录,不然的话就会报错,找不到文件或者文件夹

    设置静态资源目录,用于存储服务器端的静态资源文件

    app.use('/serverImage', express.static(path.join(__dirname, 'serverImage')));

    然后就是对文件的命名不能出现空格

    文件的链接可以使用本地服务器端的url地址

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    相关文章

    • Node.js 文件?#24515;?#24405;结构创建实例代码

      Node.js 文件?#24515;?#24405;结构创建实例代码

      下面小编就为大家带来一篇Node.js 文件?#24515;?#24405;结构创建实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2016-07-07
    • Nodejs进阶之服务端字符编解码和乱码处理

      Nodejs进阶之服务端字符编解码和乱码处理

      这篇文章主要介绍了Nodejs进阶之服务端字符编解码和乱码处理,具有一定的参考价值,?#34892;?#36259;的小伙伴们可以参?#23478;?#19979;
      2017-09-09
    • 详解使用PM2管理nodejs进程

      详解使用PM2管理nodejs进程

      本篇文章主要介绍了详解使用PM2管理nodejs进程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2017-10-10
    • Nodejs下用submit提交表单提示cannot post错误的解决方法

      Nodejs下用submit提交表单提示cannot post错误的解决方法

      这篇文章主要介绍了Nodejs下用submit提交表单提示cannot post错误的解决方法,非常不错,具有参考借鉴价值,?#34892;?#36259;的朋友一起看看吧
      2016-11-11
    • nodejs教程之入门

      nodejs教程之入门

      本文是nodejs教程系列的入门篇,主要讲述nodejs的特点、模块机制/CommonJs(模块引用、模块定义、模块标识、模块实现)、包与NPM等知识,非常的详细,这里推荐给大家作为入门的文章。
      2014-11-11
    • node puppeteer(headless chrome)实现网站登录

      node puppeteer(headless chrome)实现网站登录

      这篇文章主要介绍了node puppeteer(headless chrome)实现网站登录,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2018-05-05
    • Node.js爬取豆瓣数据实例分析

      Node.js爬取豆瓣数据实例分析

      这篇文章通过实例给大家详细分析了Node.js爬取豆瓣数据的过程以及具体方法步骤,有兴趣的朋友可以参考学习下。
      2018-03-03
    • 用nodejs搭建websocket服务器

      用nodejs搭建websocket服务器

      这篇文章主要介绍了用nodejs搭建websocket服务器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2017-01-01
    • node.js利用redis数据库缓存数据的方法

      node.js利用redis数据库缓存数据的方法

      Redis数据库采用极简的设计思想,最新版的源码包还不到2Mb。其在使用上也有别于一般的数据库。下面这篇文章就来给大家介绍了node.js利用redis数据库缓存数据的方法,需要的朋友可以参考借鉴,下面来一起看看吧。
      2017-03-03
    • 深入浅析Node.js 事件循环

      深入浅析Node.js 事件循环

      Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高,本文给大家介绍nodejs事件循环相关知识,?#28304;爍行?#36259;的朋友快来学习吧
      2015-12-12

    最新评论

    山东群英会开奖查询