使用express+multer实现node中的图片上传

在前端中，我们使用ajax来异步上传图片,使用file-input来上传图片，使用formdata对象来处理图片数据，post到服务器中

在node中使用multer中间件来对上传路由接口进行处理

multer文档

package.json

html部分

<body>

<div class="form-group">

        <label>File input:</label>

        <input type="file" name="file" id="file">

        <p id="result"></p>

        <img id="img" src="">

    </div>

    <button id="upload" class="btn btn-default">提交</button>

    </body>

js部分

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script>

        //上传图片的业务逻辑函数

        function uploadFile(){

            //上传图片的input

            var file = document.getElementById("file")

            //因为准备用post提交，又因为图片的内容比较大，所以我们选择使用formdata来承载数据

            //创建formdata对象

            var formData = new FormData();

            //给formdata对象中放入数据(键值对的方式)

            formData.append('file',file.files[0]);

            //提交请求

            $.ajax({

                url: '/upload',//请求路径

                type: 'POST',

                data: formData,

                contentType: false,//为了让浏览器根据传入的formdata来判断contentType

                processData: false,//同上

                success: function(data){

                    if(200 === data.code) {

                        $('#result').html("上传成功！");

                        $('#img').attr('src',data.data);

                    } else {

                        $('#result').html("上传失败！");

                    }

                    console.log(2)

                },

                error: function(){

                    $("#result").html("与服务器通信发生错误");

                }

            });

            console.log(1)

        }

        //给按钮添加点击事件

        function postPage() {

                //上传按钮

                var uploada = document.getElementById('upload');

                uploada.addEventListener("click",function () {

                    uploadFile();

                },false);

        }

        window.onload = function () {

            postPage();

        }

</script>

NodeJS逻辑代码

const http = require('http')

const path = require('path')

const express = require('express')

//是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件

//文档：https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

const multer = require('multer')

const app = express()

//配置express的静态目录

app.use(express.static(path.join(__dirname, 'public')));

app.get('/',(req,res)=>{

    res.sendFile(__dirname+'/index.html')

})

//配置diskStorage来控制文件存储的位置以及文件名字等

var storage = multer.diskStorage({

    //确定图片存储的位置

    destination: function (req, file, cb){

        cb(null, './public/uploadImgs')

    },

![](http://images2017.cnblogs.com/blog/1283058/201802/1283058-20180201154342296-515041615.png)

    //确定图片存储时的名字,注意，如果使用原名，可能会造成再次上传同一张图片的时候的冲突

    filename: function (req, file, cb){

        cb(null, Date.now()+file.originalname)

    }

});

//生成的专门处理上传的一个工具，可以传入storage、limits等配置

var upload = multer({storage: storage});

//接收上传图片请求的接口

app.post('/upload', upload.single('file'), function (req, res, next) {

    //图片已经被放入到服务器里,且req也已经被upload中间件给处理好了（加上了file等信息）

    //线上的也就是服务器中的图片的绝对地址

    var url = '/uploadImgs/' + req.file.filename

    res.json({

        code : 200,

        data : url

    })

});

http.createServer(app).listen(3000,()=>{

    console.log('server is listening')

})

自我感觉良好，不知道博客园为什么要给我移除首页....

再发一次，if(delete){

alert('Never publish anything again.')

}else{

alert(1)

}

使用express+multer实现node中的图片上传的更多相关文章

  1. 详细阐述Web开发中的图片上传问题

    Web开发中,图片上传是一种极其常见的功能.但是呢,每次做上传,都花费了不少时间. 一个"小功能"花费我这么多时间,真心不愉快. So,要得认真分析下原因. 1.在最初学习Java ...

  2. Node.js实现图片上传功能

    node接口实现 const express = require('express') const mysql = require('mysql') const cors = require('cor ...

  3. 基于Node的React图片上传组件实现

    写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循R ...

  4. 关于web项目中的图片上传、并在前端显示问题(tomcat中配置文件上传虚拟路径)

    一.数据库存储 直接把图片的二进制码存到数据库,可参考blog:http://blog.csdn.net/hope2jiang/article/details/590733 直接存图片在mysql上面 ...

  5. webuploader项目中多图片上传实例

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 【转】关于web项目中的图片上传、并在前端显示问题(tomcat中配置文件上传虚拟路径)

    一.数据库存储 直接把图片的二进制码存到数据库,可参考blog:http://blog.csdn.net/hope2jiang/article/details/590733 直接存图片在mysql上面 ...

  7. 给DEDECMS广告管理中增加图片上传功能

    dedecms的广告管理功能稍微有点次,本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自己的dedecms版本下载对应的编码然后解压把里面的文件放在后台目录覆盖即可 ...

  8. Node.js之图片上传

    本文用node进行图片上传主要借助formidable插件,具体使用步骤如下: 1.安装formidable插件 npm install formidable -g 2.引入依赖包 const for ...

  9. 自定Tinymce中的图片上传

    在引入组件上添加 上传图片的url地址 <tinymce :height="300" ref="tinymce" //上传图片的url地址 upload- ...

随机推荐

  1. c/c++ 贪吃蛇控制台版

    贪吃蛇控制台版(操作系统win7 64位:编译环境gcc, vs2017通过,其它环境未测试 不保证一定通过) 运行效果: #include <iomanip> #include < ...

  2. 在eclipse上安装Scala插件

    1.官网下载地址 http://scala-ide.org/download/current.html 目前最新的版本 http://download.scala-ide.org/sdk/lithiu ...

  3. Pyqt4的对话框 -- 预定义对话框

    QinputDialog提供了一种获取用户单值数据的简介形式. 它接受的数据有字符串.数字.列表中的一项数据 # QInputDialog 输入对话框 # 本示例包含一个按钮和一个行编辑部件.单击按钮 ...

  4. 数据对象转json与md5加密注意事项

    项目中遇到将OC数据对象类型转化字符类型,然后进行MD5加密的技术流程,在转化字符数组到字符加密过程中遇到一些问题. 问题 转化后的字符进行md5加密,出现与服务器加密结果不匹配的情况 分析 在对代码 ...

  5. mysql5.7 设置远程访问

    mysql5.7设置远程访问不是和网上说的一样建个用户赋个权限就可以访问的.比如下边这个就是建用户赋权限,可能在之前的版本可以,但是我在我的mysql上一直不行.为此烦了好久!!!项目都耽误了!! 一 ...

  6. org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression

    前言 本文中提到的解决方案,源码地址在:springboot-thymeleaf,希望可以帮你解决问题. 本文中涉及的两个异常为我开发时遇到的,可能和你目前所要处理的bug不同,如果不是同一个问题,希 ...

  7. InnoDB一棵B+树可以存放多少行数据？

    一个问题? InnoDB一棵B+树可以存放多少行数据?这个问题的简单回答是:约2千万.为什么是这么多呢?因为这是可以算出来的,要搞清楚这个问题,我们先从InnoDB索引数据结构.数据组织方式说起. 我 ...

  8. Flask框架

    FLask框架的简单介绍 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请 ...

  9. Windows下Java环境变量配置

    新建: JAVA_HOMEC:\Program Files\Java\jdk1.8.0_25 新建或添加到开头: PATH %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; C ...

  10. CTF---Web入门第二题 上传绕过

    上传绕过分值:10 来源: Justatest 难度:易 参与人数:5847人 Get Flag:2272人 答题人数:2345人 解题通过率:97% bypass the upload 格式:fla ...