node express 图片上传详解

最新推荐文章于 2023-04-28 17:14:02 发布

原创最新推荐文章于 2023-04-28 17:14:02 发布 · 892 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#nodejs #前端

本文详细介绍了如何使用Node.js和Express框架实现图片上传功能，包括前端HTML表单设计、Ajax请求处理、后端Multer中间件配置及图片保存流程。通过实际案例，展示了从用户界面到服务器端完整的工作流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

node express 图片上传详解

html代码

<dl>
    <dt>头像设置</dt>
    <dd>
        <img class="avatar" id="avatar" width="150" height="150" src="..{{ user.avatar }}" alt="">
        <div>
            <input type="file" name="" id="file">
        </div>
    </dd>
</dl>
<!-- 因为接口代码是用js写的所以需要引入jq文件 -->
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script>
  var OL_Action_Root = "http://127.0.0.1:3000";
  $('#file').on('change', function (e) {
    // console.log(this[0].files)
    var windowURL = window.URL || window.webkitURL;
    var dataURL = windowURL.createObjectURL(e.target.files[0]);
    //64编码地址，可直接用于前端图片预览
    console.log(dataURL)
    // 获取file域里的图片信息
    var formData = new FormData()
     //创建formdata对象
    formData.append("test",e.target.files[0])  
    // 将文件信息 append 进入formdata对象  key值 为后台 single 设置的值  
    $.ajax({
        url: OL_Action_Root+'/upload',
        type: 'POST',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data){
          console.log(data)
           if (data.err==0) {
              $('#avatar').attr('src',OL_Action_Root+data.data)
           }
        },
        error: function(jqXHR, textStatus, errorThrown){
          console.log(500)
          // document.getElementById("status").innerHTML = "<span style='color:#EF0000'>连接不到服务器，请检查网络！</span>";
        }
    });
  })
</script>

router.js

const express = require('express') 
const multer = require('multer');			//需要先引包 npm i -S multer
const fs = require('fs')
const path = require('path')
const app = express();

//生成的图片放入uploads文件夹下
var upload = multer({dest:'uploads/'})

app.post('/upload',upload.single('test'), function (req, res, next) {
  //读取文件路径(uploads/文件夹下面的新建的图片地址)
  fs.readFile(req.file.path,(err,data)=>{
    //如果读取失败
    if(err){return res.send('上传失败')}
    //如果读取成功
    //声明图片名字为时间戳和随机数拼接成的，尽量确保唯一性
    let time = Date.now()+parseInt(Math.random()*999)+parseInt(Math.random()*2222);
    //拓展名
    let extname = req.file.mimetype.split('/')[1]
    //拼接成图片名
    let keepname = time+'.'+extname
    //三个参数
    //1.图片的绝对路径
    //2.写入的内容
    //3.回调函数
    fs.writeFile(path.join(__dirname,'/public/img/'+keepname),data,(err)=>{
        if(err){return res.send('写入失败')}
        res.send({err:0,msg:'上传ok',data:'/public/img/'+keepname})
    });
  });
});

let server = app.listen(3000, '127.0.0.1', function (req, res) {
    // console.log(server.address());
    let host = server.address().address;
    let port = server.address().port;
    console.log('Example app listening at http://%s:%s', host, port);
});