图片上传到服务器的过程

subsistent

已于 2023-03-27 11:43:13 修改

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： node.js

于 2023-03-27 10:44:24 首次发布

本文链接：https://blog.csdn.net/m0_65121454/article/details/129790859

Web 专栏收录该内容

164 篇文章

订阅专栏

文章描述了如何使用Node.js的Express框架，结合fs、path模块和multer库来处理前端上传的图片。通过multer创建临时空间存储图片，然后利用fs模块读取并移动文件到服务器指定位置，最后返回图片地址给前端。

前端业务

根据后台接口发送请求，图片作为参数，需要带上一个 name 字段

后台业务

后台接收图片可以使用 ndoe 的 fs、path 文件系统加上 multer 的 npm 包实现。主要思想是通过 multer 创建一个临时空间用来接收并存储前端发送过来的二进制图片数据。通过 fs 模块读取临时空间的数据，并使用 pipe 方法注入到 fs 模块创建 path 模块指向的服务器文件夹下

后台代码试例，express 环境

var express = require('express')
var router = express.Router()
var fs = require('fs')
var path = require('path')
/* 用于处理非表单的文件数据流 */
var multer = require('multer')
// 配置数据流向的文件,绝对路径，相对于根目录
var upload = multer({ dest: 'upload/' })
// 创建一个接收为编码的二进制数据流的方法实例 接收 name 为 newimg 字段的上传文件，最大接收为 1
var cpUpload = upload.fields([{ name: 'newimg', maxCount: 1 }])

// 接口
router.post('/add', cpUpload, (req, res) => {
    // 前端发送请求后，服务器已经接受到了前端传递过来的图片数据，保存在 files 对象下
    // 加上 cpUpload，数据就会从这个方法所设置的地址流过来，生成一个本地临时空间，类似于虚拟 DOM
    // 获取这段数据
    var img = req.files.newimg[0]

    // fs 模块读取临时空间的数据
    var readStream = fs.createReadStream(img.path)
    // 设置图片存入的路径，并给文件名前面加上一个时间轴，防止命名重复
    var imgpath = `/cdn/${Date.now()}-${img.originalname}`
    // 创建一个写入图片数据的地址
    var writeStram = fs.createWriteStream(
        path.resolve(__dirname, `../public${imgpath}`)
    )
    // 设置一个 pipe 管道，将读取的数据解析并注入到写入地址
    readStream.pipe(writeStram)
    // 监听注入地址的 close 事件，表示注入完毕
    writeStram.on('close', () => {
        // 返回给前端一个图片地址
        res.json({ err: 0, msg: 'success', data: { img: imgpath } })
    })
})
module.exports = router