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 相关文章推荐
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
原生js实现回复评论功能
Jan 18 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
详解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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
详解Vue单元测试case写法
2018/05/24 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
启动targetcli时遇到错误解决办法
2017/10/26 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
python实现黑客字幕雨效果
2018/06/21 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
python绘制分布折线图的示例
2020/09/24 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
个人课题方案
2014/05/08 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
企业宣传标语
2014/06/09 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
超强台风观后感
2015/06/09 职场文书
24年收藏2000多部退役军用电台
2022/02/18 无线电
Selenium浏览器自动化如何上传文件
2022/04/06 Python