图片上传

最新推荐文章于 2024-10-27 16:00:56 发布

原创最新推荐文章于 2024-10-27 16:00:56 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#multer

Nodejs 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何在Express框架中搭建图片上传接口，包括前端界面创建、后端路由设置及使用Multer处理文件上传。

专门新建一个对应的接口实现图片上传，在app.js中增加路由中间件，和引用routers下的对应模块js

var albumRouter = require('./routes/album.js');
...
app.use('/album', albumRouter);

在routers中新建 album.js
注意点
文件、图片、音频、视频的上传都是post

const express = require('express');

const router = express.Router();

router.post('/', upload.any(), (req, res, next) => {//upload.any()是之后写入的
    // console.log(req.body);
    res.render('album', {
        data: JSON.stringify({
            status: 200,
            info: '上传成功'
        })
    })
})

module.exports = router;

新建前端界面

<form 
        enctype="multipart/form-data"
        id="uploadForm"
      >
        <input type="file" name="album" id="album">  <br/>
    
        <button type="button" class="btn btn-primary"> 提交 </button>
      </form>

$('button').on('click',function () {
    $.ajax({
      url: 'http://localhost:3000/album',
      type: 'POST',
      data: new FormData($('#uploadForm')[0]),
      processData: false,//必须
		  contentType: false,//必须
      success: function(data) {
        console.log(data)
      }
    })
  })

注意点：

processData设置为false。因为data值是FormData对象，不需要对数据做处理。
<form>标签添加enctype="multipart/form-data"属性。
cache设置为false，上传文件不需要缓存。
contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false

此时后端接收到的req.body是一个空对象，前端传来的是二进制，此时需要一个转换，安装第三方模块

$ cnpm i multer -S

使用它，并且把图片存在public中的upload（新建）目录下

const express = require( 'express' )
const multer = require( 'multer' )
const router = express.Router()
const path = require( 'path' )

// 进行文件的磁盘存储

var storage = multer.diskStorage({
  destination: function (req, file, cb) { //这个表示存储路径，往哪里存储
    cb(null, path.join( __dirname, '../public/upload') )
  },
  filename: function (req, file, cb) {// 给前端发来的文件起名
    console.log('file',file)
    const type = file.originalname.slice( file.originalname.indexOf('.') )
    const filename = file.fieldname + '-' + Date.now() + type 
    cb(null, filename)
  }
})

var upload = multer({ storage: storage })