express - formidable - 处理文件上传

官网:https://www.npmjs.com/package/formidable
1、安装 formidable版本2(版本3会报错):npm install formidable@v2
2、创建 ejs 文件
在这里插入图片描述
在这里插入图片描述

<form action="/portrait" method="post" enctype="multipart/form-data">
    用户名:<input type="text" name="username">
    头像:<input type="file" name="photo">
    <button type="submit">提交</button>
</form>

2、提前创建上传文件的保存目录:public/images
3、路由接口
在这里插入图片描述

// 导入 formidable
const formidable = require('formidable');

// 显示网页的(表单)
router.get('/portrait', (req, res) => {
  res.render('portrait')
})

// 处理文件上传
router.post('/portrait', (req, res) => {
  // 创建 form 对象
  const form = formidable({
    multiples: true,
    // 设置上传文件的保存目录
    uploadDir: 'public/images',
    // 保持文件后缀
    keepExtensions: true
  });
  // 解析请求报文
  form.parse(req, (err, fields, files) => {
    if (err) {
      next(err);
      return;
    }
    console.log('fields----', fields);
    console.log('files-----', files);

    // 服务器保存该图片的访问 URL
    // /images/3dd50a86597bb8269842bc900.jpg
    let url = '/images/' + files.photo.newFilename; //将此数据保存在数据库中 (photo命名(不一定是‘photo’,以输出实际为准)与api调试工具参数名一致)
    console.log('url-----', url);
    res.send(url);
  });
})

结果:
访问图片:http://127.0.0.1:3000/images/03763d69d21770eca2ad44500.jpg
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值