使用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. 设计模式学习(四): 1.简单工厂 (附C#实现)

    New 这是一个典型的情况, 我们需要在运行时来实例化一些具体的类. 在需要修改或者扩展的时候我们就需要改这段代码. 一个程序中可能会多次出现类似的代码, 这使得维护和更新非常困难而且容易出错. 通过 ...

  2. Python多线程编程（第二篇）

    一.Python中的上下文管理器(contextlib模块) 上下文管理器的任务是:代码块执行前准备,代码块执行后收拾 1.如何使用上下文管理器: 如何打开一个文件,并写入"hello wo ...

  3. ghost.py在代用JavaScript时的超时问题

    在写爬虫的时候,关于JavaScript的解析问题,我在网上找到的一个解决方案是使用ghost.py这个模块,他是一个基于webkit封装的一个客户端,可以用来解析动态页面.它的使用非常简单,它从2. ...

  4. master_pos_wait函数与MySQL主从切换

    背景 主从切换是高可用MySQL架构的必要步骤(即使用不发生,也要有备无患).一般设置为双M(M1.M2),假设当前状态为写M1,而M2只读,切换的大致流程如下: 1.  停止应用写M1,将M1设置为 ...

  5. css3 移动端 开关效果

    展示效果: 首先是html <div class="container"> <div class="bg_con"> <input ...

  6. JAVA入门 面向对象

    主要内容 1.类和对象的概念 2.什么是面向对象 3.什么对象的属性方法 4.何谓对象引用 5.实例化 类和对象的概念 万物皆对象,客观存在的事物皆为对象.我们大到名胜古迹,小道生活中的一件物品,例如 ...

  7. 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](一)

    前言 大家好,我是Rector 从今天开始,Rector将为大家推出一个关于创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar]的文章系列, ...

  8. windows下apache配置虚拟主机

    因为有多个laravel项目需要配置根目录到public下面,所以要配置多个虚拟主机 方法一:添加端口号 第一步:进入apache的目录 Apache24\conf 找到 httpd.conf 文件, ...

  9. HDU5447 Good Numbers

    http://acm.hdu.edu.cn/showproblem.php?pid=5447 网上好像只找到java的题解,写完就发一下c++代码咯,顺便纪念一下+存个int128板子 做法可以看tj ...

  10. UVA 572 dfs求连通块

    The GeoSurvComp geologic survey company is responsible for detecting underground oil deposits. GeoSu ...