关于express使用formidable上传图片

关于express使用formidable上传图片express 中使用 formidable 上传图片前端页面 js 逻辑代码 nodejs 处理逻辑前端页面 使用 bootsrap 布局静态页面 formclass form horizontalfo add divclass form group labelclass col xs 2control label 分类名称 amp labelclass col xs 2control label divclass form group formclass form horizontalfo add

express中使用formidable上传图片

前端页面

/*使用bootsrap布局静态页面*/ <form class="form-horizontal form-add"> <div class="form-group"> <label class="col-xs-2 control-label">分类名称</label> <div class="col-xs-8"> <input name="classname" class="form-control" type="text" /> </div> </div> <div class="form-group"> <label class="col-xs-2 control-label">分类图片</label> <div class="col-xs-8"> <input name="classimg" class="form-control" type="file" accept="image/*" /> </div> </div> </form> 

js逻辑代码

/*点击添加分类使用jquery发送ajax请求*/ // js 获取form表单 let form = document.querySelector(".form-add") // 将表单中的数据通过formdata获取并传输 let formdata = new FormData(form) $.ajax({ 
    /*api 为监听接口的地址,如:http:127.0.0.1:3000/*/ url: api + 'addclass', type: 'post', data: formdata, dataType: 'json', // 限制默认发送form方式,改为json格式传送 contentType: false, /*默认情况下,通过data选项传递进来的数据, 如果是一个对象(技术上讲只要不是字符串), 都会处理转化成一个查询字符串, 以配合默认内容类型 “application/x-www-form-urlencoded”。 如果要发送 DOM 树信息或其它不希望转换的信息,设置为 false。*/ processData: false, success: function(res){ 
    if(res.status == 200) { 
    /*这里执行请求成功的逻辑*/ } } }) 

nodejs处理逻辑

let path = require('path') // 引入express let express = require('express') //引入formidable模块 let formidable = require('formidable'); //引入数据库 let mysql = require('mysql') // 创建数据库连接 let connect = mysql.createConnection({ 
    host: '127.0.0.1', //数据库服务器ip,127.0.0.1表示本机 user: 'root', password: '123', //数据库密码 database: 'shop' //数据库名 }) // 连接数据库 connect.connect() /*监听添加分类接口*/ app.get("/addclass", function(req,res){ 
    // 获取请求的参数 // 获取传入的form表单 解析地址传入的form表单 let form = new formidable.IncomingForm(); // 设置图片上传的地址 form.uploadDir = './upload' // 保留图片后缀名 form.keepExtensions = true // 解析参数 // fields 除了上传图片的其他数据 // files 上传的文件 form.parse(req, function(err, fields, files){ 
    // 解析上传图片的地址,获取图片名称 let filebase = path.parse(files.img.path).base // 将上传的数据存入数据库中 // ? 代表sql语句需要的参数 let sql = 'insert into goods(name, img) values(?) ' let data = [fields.name, filebase] connect.query(sql, [data], function(err, data){ 
    if(!err) { 
    res.json({ 
    status: 200, data: '' //上传成功返回的数据 }) }else { 
    //上传失败操作 } }) }) }) 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/232214.html原文链接:https://javaforall.net

(0)
上一篇 2025年10月25日 下午2:01
下一篇 2025年10月25日 下午2:22


相关推荐

  • word2vec原理与Gensim使用[通俗易懂]

    word2vec原理与Gensim使用[通俗易懂]word2vec原理1NeuralNetworkLanguageModel2CBOW2.1HierarchicalSoftmax2.2NegativeSampling3Skip-gram3.1HierarchicalSoftmax3.2NegativeSampling4负采样算法5.word2vec实战1NeuralNetworkLanguageModel…

    2022年5月16日
    58
  • 为什么触摸屏只能用手

    为什么触摸屏只能用手

    2026年3月15日
    2
  • MFC中使用COleVariant获取CMFCPropertyGridProperty属性窗口某个属性值

    MFC中使用COleVariant获取CMFCPropertyGridProperty属性窗口某个属性值  获取MFC属性窗口CMFCPropertyGridProperty中某个item的值时,如果不小心写错了类型,就会导致获取的结果不正确,原因就是COleVariant其实继承自一个特殊的结构体tagVARIANT。COleVariant类声明···C++classCOleVariant:publictagVARIANT{//Constructorspubli…

    2022年7月18日
    16
  • pycharm不联网能运行吗_pycharm连接调试器失败

    pycharm不联网能运行吗_pycharm连接调试器失败第一步:查看你的计算机是否安装了严密的防火墙,当你开始运行编写的网络程序时他都会发出警告并且禁止你的程序连接网络你要对防火墙进行配置,让他允许你的程序或者直接关闭防火墙(慎重考虑)如下图直接关闭防火墙或者对防火墙进行设置(只要选中这两个勾,在你执行的时候会提示你是否允许XXX连接网络)第二步:因为有些代码里面可能需要根据主机名称来去本地的DNS里找对应的IP地址,由于本地的DN…

    2022年8月27日
    8
  • RabbitMQ原理详解

    RabbitMQ原理详解RabbitMQ 我们通常谈到消息队列 就会联想到这其中的三者 生产者 消费者和消息队列 生产者将消息发送到消息队列 消费者从消息队列中获取消息进行处理 对于 RabbitMQ 它在此基础上做了一层抽象 引入了交换器 exchange 的概念 交换器是作用于生产者和消息队列之间的中间桥梁 它起了一种消息路由的作用 也就是说生产者并不和消息队列直接关联 而是先发送给交换器 再由交换器路由到对应的队列 至于它是根据何种规则路由到消息队列的 就是我们下面需要介绍的内容了 这里的生产者并没有直接将消息发送给消息队列 而是

    2026年3月20日
    1
  • SpringBoot 整合Dubbo

    SpringBoot 整合Dubbo文章目录一 工程目录结构二 创建工程项目 1 创建接口工程 cw dubbo api 1 pom xml 2 创建接口类 LoginService 2 创建服务提供者工程 cw dubbo provider 1 pom xml 2 application properties 3 主类 CwDubboProvi 4 LoginService 创建服务调用者工程 cw dubbo consumer 1 pom xml 2 application properties

    2026年3月18日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号