博客
关于我
Node+express框架图片上传
阅读量:771 次
发布时间:2019-03-24

本文共 1478 字,大约阅读时间需要 4 分钟。

上传功能开发实录

1. 创建表单提交 upload.html 文件

我们需要为用户创建一个简单的图片上传表单,用户可以通过该表单上传个人头像。创建一个 upload.html 文件,内容如下:

    用户头像上传    

用户头像上传

上传头像:

2. 创建处理文件 upload.js

我们需要创建一个 upload.js 文件,作为服务器端的处理逻辑。以下是实现步骤:

1.1 引入必要的库

使用以下外部库来处理文件上传和路由:

const express = require('express');const bodyParser = require('body-parser');const formidable = require('formidable');const fs = require('fs');const path = require('path');

1.2 初始化服务器和中间件

const app = express();app.use(bodyParser.urlencoded({ extended: false }));

1.3 配置静态资源和路由

app.use(express.static(path.join(__dirname, 'upload')));// 定义路由app.get('/', (req, res) => {    res.sendFile(path.join(__dirname, 'upload.html'));});app.post('/upload', (req, res) => {    // 处理文件上传    const form = new formidable.IncomingForm();    form.parse(req, (err, fields, files) => {        // 读取上传的文件        const readStream = fs.createReadStream(files.userImg.path);                // 写入文件        const writeStream = fs.createWriteStream(            path.join(__dirname, 'upload', files.userImg.name)        );        readStream.pipe(writeStream);                // 处理上传完成后的回应        res.send(`图片已上传至 ${files.userImg.name}`);    });});

1.4 启动服务器

app.listen(3000, () => {    console.log('服务器运行中,访问地址为 http://localhost:3000');});

这样,用户可以通过浏览器访问 http://localhost:3000 进行头像上传。上传完成后,图片会被保存在 upload 目录下。

注意事项

  • filefields 的处理需要谨慎操作
  • 确保服务器端有权限写入目标目录
  • 可以在上传完成后返回图片的路径或页面跳转
  • 建议配置 funculiar 中间件进行图片处理和文件类型验证
  • 这个实现方案简单明了,适合用于图片头像上传场景,同时兼容大部分主流的浏览器。

    转载地址:http://yyokk.baihongyu.com/

    你可能感兴趣的文章
    mysql 协议的退出命令包及解析
    查看>>
    mysql 取表中分组之后最新一条数据 分组最新数据 分组取最新数据 分组数据 获取每个分类的最新数据
    查看>>
    mysql 多个表关联查询查询时间长的问题
    查看>>
    mySQL 多个表求多个count
    查看>>
    mysql 多字段删除重复数据,保留最小id数据
    查看>>
    MySQL 多表联合查询:UNION 和 JOIN 分析
    查看>>
    MySQL 大数据量快速插入方法和语句优化
    查看>>
    mysql 如何给SQL添加索引
    查看>>
    mysql 字段区分大小写
    查看>>
    mysql 字段合并问题(group_concat)
    查看>>
    mysql 字段类型类型
    查看>>
    MySQL 字符串截取函数,字段截取,字符串截取
    查看>>
    MySQL 存储引擎
    查看>>
    mysql 存储过程 注入_mysql 视图 事务 存储过程 SQL注入
    查看>>
    MySQL 存储过程参数:in、out、inout
    查看>>
    mysql 存储过程每隔一段时间执行一次
    查看>>
    mysql 存在update不存在insert
    查看>>
    Mysql 学习总结(86)—— Mysql 的 JSON 数据类型正确使用姿势
    查看>>
    Mysql 学习总结(87)—— Mysql 执行计划(Explain)再总结
    查看>>
    Mysql 学习总结(88)—— Mysql 官方为什么不推荐用雪花 id 和 uuid 做 MySQL 主键
    查看>>