nodejs+formidable实现上传图片到public文件夹并重命名

本文教你如何使用nodejs从本地上传图片到public文件夹

实现效果如下：

1.从本地选择图片，点击「添加图片」

2.图片保存至public文件夹下image子文件夹中

一、安装formidable

npm i formidable 安装formidable模块到项目文件

创建upload.js文件来写后端代码

二、upload.js 引入 formidable并处理表单数据

1.require引入formidable 和 bodyParser

bodyParser用来解析待文件上传的表单数据

var express = require('express');
var router = express.Router();
const formidable = require("formidable")
const bodyParser = require("body-parser")

// 解析带文件上传的表单需要
router.use(bodyParser.urlencoded({ extended: true }))

 2.引入其他模块，用于生成文件名（文件重命名）

var path = require('path');
var util = require('util');
var fs = require('fs')
var sd = require('silly-datetime')

3.引入数据库，方便后续将图片路径存入数据库

const mysql = require('mysql');
const { MYSQL_CONF } = require("../DB/model");
const pool = mysql.createPool(MYSQL_CONF)

4.实现上传图片的接口

// 上传保存图片的接口
router.post("/profile", (req, res) => {
  var form = new formidable.IncomingForm()
  form.uploadDir = "./public/images/user" // 定义图片上传到的目录public>>images>>user
  form.keepExtensions = true
  form.parse(req, function (err, fields, files) {
    if (err) return res.redirect(303, '/error')
    // console.log(req);
    console.log('上传的图片信息', util.inspect({ fields: fields, files: files }));//打印解析出的信息，方便后续读取
    if (files.upload_p.originalFilename == "") {  //判断前端是否传了图片，如果没有，向前端返回数据，并return
      res.json({
        code: -2,
        msg: '没图片'
      })
      return
    }
    // 根据原文件名+当前时间戳+随机数生成新文件名
    p = path.resolve(__dirname, '..') //获取当前文件（upload.js）的上一级文件的位置，用于后续
    let ttt = sd.format(new Date(), "YYYYMMDDHHmmss");
    let ran = parseInt(Math.random() * 89999 + 10000); //生成随机数
    let extname = files.upload_p.newFilename; //从解析的表单中获取图片文件上传后的文件名(上传后在public文件夹下的名称)
    let originalFilename = files.upload_p.originalFilename //从解析的表单中获取图片文件的源文件名(上传前在本地的名称)
    let oldpath = p + '\\' + files.upload_p.filepath  //p + 上传后的文件位置，记得使用转义符连接，得到现在的图片文件地址
    let newpath = path.resolve(oldpath, '..') + '\\' + ttt + extname + ran + originalFilename; //现在的图片文件地址的上一级地址+拼接后的新的文件名，得到新的图片文件地址
    // 保存新的图片地址，用于稍后往数据库写入，由于在数据库中存储图片地址的字符串，此处需要使用多次转义符
    let newpath1 = '\\\\images\\\\user\\\\' + ttt + extname + ran + originalFilename;
    //使用fs.rename对图片进行重命名
    fs.rename(oldpath, newpath, function (err) {
      if (err) {
        // 重命名失败，向前端返回数据
        res.json({
          code: -1,
          msg: '错误'
        })
        throw Error("改名失败")
      }
      else {
        // 重命名成功，向保存图片地址到数据库
        pool.getConnection(function (err, connection) {
          var $sql5 = `UPDATE userinfo set photo="${newpath1}" where userinfo_id=${req.session.loginUser.userid}` //sql语句，根据业务需求进行修改
          connection.query($sql5, function (err, result) {
            console.log($sql5, err, result);
            if (err) {
              res.json({
                code: -1,
                msg: '错误'
              })
            }
            else if (result.affectedRows == 1) {
              // 图片保存成功，向前端返回数据
              result = {
                code: 1,
                msg: '上传成功'
              }
            } else {
              // 图片保存失败，向前端返回数据
              result = {
                code: -1,
                msg: '错误'
              }
            }
            res.json(result)
          })
        })
      }
    })
  })

})

三、实现前端代码

html代码

<form action="/upload/profile" method="post" enctype="multipart/form-data">
    <label>
        上传图片：
        <input type="file" name="upload_p" multiple="multiple">
    </label>
        <br>
        <input id="btn_sub" type="button" value="提交图片">
</form>

js代码

    $('#btn_sub').on('click', function () {
        var $form = $('form');
            //ajax调用上传图片的接口
        $.ajax({
            url: $form.attr('action'),
            type: "post",
            data: new FormData($form[0]),
            // 不要处理转化成一个查询字符串
            processData: false,
            contentType: false,
            success: function (res) {
				if(res.code== -2){
					alert(res.msg)
				}else if(res.code== 1){
					alert(res.msg)
				}else{
					alert(res.msg)
				}
            }
        })
    });