欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-17 09:04:58
在自己做一个简单的后台管理系统时,用的是node作本地数据库,然后用了element-ui的upload组件来实现图片的上传,中间有遇到那么点小坑,这里记录下,比较坑的一点...

在自己做一个简单的后台管理系统时,用的是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地址

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