使用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. Java学习笔记6---字符串比较方法compareTo(String str)

    方法原型为int compareTo(String str),返回值为int型,参数为字符串类型. 下面是简单示例: /* * compareTo()返回参与比较的两个字符串的ascii码差值 * O ...

  2. Hyperledger Fabric 本地运行的简单示例

    环境: Ubuntu 16.04 go 1.7.4 版本: Fabric v1.0.0-alpha 本文主要目的就是让大家体验以下Fabric网络环境搭建的具体过程,不基于集成化脚本手动搭建. 一.编 ...

  3. Check whether a remote server port is open on Linux

    链接:https://www.pixelstech.net/article/1514049471-Check-whether-a-remote-server-port-is-open-on-Linux

  4. 【次小生成树】bzoj1977 [BeiJing2010组队]次小生成树 Tree

    Description 小 C 最近学了很多最小生成树的算法,Prim 算法.Kurskal 算法.消圈算法等等. 正当小 C 洋洋得意之时,小 P 又来泼小 C 冷水了.小 P 说,让小 C 求出一 ...

  5. 关于对JavaScript待于完善的一些知识点

    学习JavaScript也存在一段时间,以下是个人对JavaScript中抽象的知识点记录备案,将有待于后面逐个完善...... 1.JavaScript在内存中的体现(内存中栈堆与基本类型及引用类型 ...

  6. Visual Studio总是在重新生成项目？

    你是否曾经有过这种感觉:即使代码没有改变,Visual Studio也总是在重新生成项目? 我们可以生成一个项目,然后不做任何处理后再次生成,我们就可以看见--VS正在开始生成项目,而我的项目代码并没 ...

  7. windows平台python 2.7环境编译安装zbarlight

    类似于前一篇博文,http://www.cnblogs.com/zhongtang/p/7148082.html中描述的情况. 编译zbarlight同样出现问题,简要处理步骤如下: 1.到https ...

  8. 【HTML_标签大全】

    HTML标签大全 标签 描述 标签类型 备注 <!--...--> 定义注释 / 单标签 <!DOCTYPE> 定义文档类型 / 单标签 <head></he ...

  9. Linux /bin, /sbin, /usr/bin, /usr/sbin 区别

    在linux下我们经常用到的四个应用程序的目录是:/bin./sbin./usr/bin./usr/sbin    bin:  bin为binary的简写主要放置一些系统的必备执行档例如:cat.cp ...

  10. Java入门篇（四）——数组

    上篇在foreach中有引入一个数组的概念,数组是最为常见的一种数据结构,是相同类型的.用一个标识符封装到一起的基本类型数据序列或对象序列. 数组是具有相同数据类型的一组数据的集合,根据维数不同可以分 ...