node+multer实现图片上传的示例代码

最近在学习node实现一个后台管理系统,用到了图片上传,有一些小问题记录一下~

直接上代码,问题都记录在注释里~

const express = require('express');
const path = require('path');
const multer = require('multer');
const app = new express();

// 设置静态目录 第一个参数为虚拟的文件前缀,实际上文件系统中不存在
// 可以用public做为前缀来加载static文件夹下的文件了
app.use('/public', express.static(path.join(__dirname, './static')));

// 根据当前文件目录指定文件夹
const dir = path.resolve(__dirname, '../static/img');
// 图片大小限制KB
const SIZELIMIT = 500000;

const storage = multer.diskStorage({
  // 指定文件路径
  destination: function(req, file, cb) {
    // !!!相对路径时以node执行目录为基准,避免权限问题,该目录最好已存在*
    // cb(null, './uploads');
    cb(null, dir);
  },
  // 指定文件名
  filename: function(req, file, cb) {
    // filedname指向参数key值
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({
  storage: storage
});

app.post('/upload', upload.single('file'), (req, res) => {
  // 即将上传图片的key值 form-data对象{key: value}
  // 检查是否有文件待上传
  if (req.file === undefined) {
    return res.send({
      errno: -1,
      msg: 'no file'
    });
  }
  const {size, mimetype, filename} = req.file;
  const types = ['jpg', 'jpeg', 'png', 'gif'];
  const tmpTypes = mimetype.split('/')[1];
  // 检查文件大小
  if (size >= SIZELIMIT) {
    return res.send({
      errno: -1,
      msg: 'file is too large'
    });
  }
  // 检查文件类型
  else if (types.indexOf(tmpTypes) < 0) {
    return res.send({
      errno: -1,
      msg: 'not accepted filetype'
    });
  }
  // 路径可根据设置的静态目录指定
  const url = '/public/img/' + filename;
  res.json({
    errno: 0,
    msg: 'upload success',
    url
  });
});

app.listen(3000, () => {
  console.log('service start');
});

附上文档参考链接:
express框架
path模块
multer
最后再附赠一个node自动重启工具nodemon

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

(0)

相关推荐

  • 使用express+multer实现node中的图片上传功能

    下文给大家介绍使用express+multer实现node中的图片上传功能,具体内容介绍如下所示: 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中 在node中使用multer中间件来对上传路由接口进行处理 multer文档 package.json html部分 <body> <div class="form-group"> <label>File input

  • node+multer实现图片上传的示例代码

    最近在学习node实现一个后台管理系统,用到了图片上传,有一些小问题记录一下~ 直接上代码,问题都记录在注释里~ const express = require('express'); const path = require('path'); const multer = require('multer'); const app = new express(); // 设置静态目录 第一个参数为虚拟的文件前缀,实际上文件系统中不存在 // 可以用public做为前缀来加载static文件夹下的

  • React+react-dropzone+node.js实现图片上传的示例代码

    本文将会用typescript+react+react-dropzone+express.js实现前后端上传图片.当然是用typescript需要提前下载相应的模块,在这里就不依依介绍了. 第一步,配置tsconfig.js "compilerOptions": { "outDir": "./public/", "sourceMap": true, "noImplicitAny": true, "

  • React Native使用fetch实现图片上传的示例代码

    本文介绍了React Native使用fetch实现图片上传的示例代码,分享给大家,具体如下: 普通网络请求参数是JSON对象 图片上传的请求参数使用的是formData对象 使用fetch上传图片代码封装如下: let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现图片上传 * @param {string} url 接口地址 * @param {J

  • Vue项目实现html5图片上传的示例代码

    目录 图例 1.选择图片 2.预览图片 2.1添加图片预览代码 两种方法的对比 3.裁剪图片 4.上传 选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片 我会以事例贯穿图片接下来,就详细的介绍每个步骤具体实现. 图例 1.选择图片 选择图片有什么好讲的呢?不就一个 input[type=file] ,然后点击就可以了吗?确实是这样的,但是,我们想要做得更加的友好一些,比如需要过滤掉非图片文件, 或只允许从摄像头拍照获取图片等,还是需要进行一些简单配置的. 下面就先来看看最简单的选

  • Nodejs+angularjs结合multiparty实现多图片上传的示例代码

    这次我们说一下nodejs+angularjs多图片上传的问题 此前也在网站看了很多篇文章,有关的内容说多不多,说少也不少,但我一一试过以后有成功的,也有没有成功的,折磨了我很长时间,最终也是成功实现了,于是想写下这篇文章,分享我的代码,也希望后人不要踏进我的坑. 首先说一下nodejs所以依赖的插件 multiparty 和 fs,可以用npm工具来安装 npm install multiparty --save npm install fs --save 先贴出我nodejs的后台代码(注意

  • vue中实现图片和文件上传的示例代码

    html页面 <input type="file" value="" id="file" @change='onUpload'>//注意不能带括号 js代码 methods: { //上传图片 onUpload(e){ var formData = new FormData(); f ormData.append('file', e.target.files[0]); formData.append('type', 'test');

  • Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

    本文实例讲述了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能.分享给大家供大家参考,具体如下: 公司要写一些为自身业务量身定制的的组件,要基于Vue,写完后扩展了一下功能,选择写图片上传是因为自己之前一直对这个功能比较迷糊,所以这次好好了解了一下.演示在网址打开后的show.gif中. 使用技术:Vue.js | node.js | express | MongoDB. github网址:https://github.com/neroneroffy/privat

  • 使用Dropzone.js上传的示例代码

    本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区 引入Dropzone.js和dropzone.css然后使用表单form定义一个class="dropzone"即可完成 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

  • 阿里云OSS域名配置及简单上传的示例代码

    目前开发系统,附件文件一般都会使用第三方的存储空间来保存,一方面是为了开发者提供便利,另一方可以减轻系统的访问压力,下面介绍一下阿里云的OSS的一些简单配置和使用. 一.阿里云OSS配置 前提:你需要购买阿里云的OSS服务器,这里就不多介绍:你需要有一个备案域名,此处也不多介绍(本人使用的阿里云进行备案的域名). 1. 阿里云OSS配置域名 1)创建bucket 2)选择tpw-bucket的"域名管理",然后点击绑定用户域名: 3)创建域名: 此处创建二级域名进行绑定,如果你想简单,

随机推荐