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

1.index.vue文件

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

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之本地服务器图片上传

1.index.vue文件

2.代理文件

3.node服务器端文件

4.小结下

你可能感兴趣的:(javascript,node.js,前端,服务器,图片上传)