使用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. Mac新手使用指南：brew安装的nginx常用命令

    安装:brew install nginx/sudo brew install nginx 启动:brew services start nginx/sudo brew services start ...

  2. WinForm响应式布局设计实践

    引言 创建响应式WinForm应用程序并不那么简单. 响应式布局,在此我指的是应用程序在不同屏幕分辨率下的可用性. 对于WinForm应用程序,我们需要明确地根据分辨率来调整控件的大小和重新定位. 虽 ...

  3. js 的数学处理方法

    1.javascript取整方法floor.round.ceil floor向下取整: Math.floor(0.20); Math.floor(0.90); Math.floor(-0.90); / ...

  4. Maven适配多种运行环境的打包方案

    项目从开发到部署会历经多个运行环境,如开发环境.测试环境和生产环境,不同环境中项目的配置文件通常也会不同,典型的如数据库连接配置.我们当然不希望每次部署打包前都去修改配置文件以适配环境,利用Maven ...

  5. js面向对象学习笔记（四）：对象的混合写法

    //对象的混合写法//1.构造函数function 构造函数() { this.属性}构造函数.原型.方法 = function () {};//调用var 对象1 = new 构造函数();对象1. ...

  6. LibreOJ NOI Round #1 Day 1 B. 失控的未来交通工具

    瞬间移动 官方题解 题意:一个带边权无向图,加边以及询问在 x,x+b,...,x+(c−1)bx,x+b,...,x+(c-1)bx,x+b,...,x+(c−1)b 这些数中,有多少存在一条与之模 ...

  7. bzoj 4918: 回文数对

    传送门 Description 给定区间[L,R],请统计有多少对整数A,B(L<=A,B<=R)满足A xor B的值在二进制表示下,去掉所有前导0后是回文串 Input 第一行包含一个 ...

  8. 【Java学习笔记之四】java进制转化

    十进制转成十六进制: Integer.toHexString(int i) 十进制转成八进制 Integer.toOctalString(int i) 十进制转成二进制 Integer.toBinar ...

  9. 【Java学习笔记之二】java标识符命名规范

    什么是标识符 就是程序员在定义java程序时,自定义的一些名字.标识符可以应用在类名.变量.函数名.包名上. 标识符必须遵循以下规则 标识符由26个英文字符大小写(a~zA~Z).数字(0~9).下划 ...

  10. PL/SQL 一个数据对象一个事务（rollback，submit）

    /*********************************************** 一个数据对象一个事务(且记录错误信息到处理对象) ************************** ...