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


Posted in Javascript onMarch 26, 2019

在自己做一个简单的后台管理系统时,用的是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">将文件拖到此处,或<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地址

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

Javascript 相关文章推荐
jQuery实现切换字体大小的方法
Mar 10 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 #Javascript
vue-router 起步步骤详解
Mar 26 #Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 #Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 #Javascript
详解用JS添加和删除class类名
Mar 25 #Javascript
详解javascript设计模式三:代理模式
Mar 25 #Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 #Javascript
You might like
php中截取字符串支持utf-8
2007/01/18 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
Three.js基础部分学习
2017/01/08 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
Move.js入门
2017/02/08 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
Python实现处理管道的方法
2015/06/04 Python
python更新列表的方法
2015/07/28 Python
python黑魔法之参数传递
2016/02/12 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
Python程序退出方式小结
2017/12/09 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
django form和field具体方法和属性说明
2020/07/09 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
领导干部保密承诺书
2014/08/30 职场文书
内科护士节演讲稿
2014/09/11 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
研究生导师评语
2014/12/31 职场文书
节约用电倡议书
2015/04/28 职场文书
元宵节晚会主持词
2015/07/01 职场文书
委托书范本格式
2019/04/18 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL