使用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. Linux sftp 另外一台机器时，出现:receive message is too long

    因为在linux登录时,首先会运行的三个文件是: /etc/profile,/home/用户名/.bashrc,其次是/home/用户名/.bash_profile,出现这个问题的原因是因为在sftp ...

  2. QTableView表格自动拉伸

    QTableView有四个关于自动拉伸的函数: void resizeColumnToContents(int column); void resizeColumnsToContens(); void ...

  3. 使用fruitstrap实现命令行将IPA包安装到iOS设备上

    Requirements Mac OS X. Tested on Snow Leopard only. You need to have a valid iPhone development cert ...

  4. Python笔记（一）：安装+爬虫环境配置+打包为EXE文件

    1.     安装 https://www.python.org/downloads/windows/  到官网下载安装程序 Windows x86        32位操作系统 Windows x8 ...

  5. 如何处理Cookie存储和读取中文乱码问题

    存储Cookie for(String str:books){ str=new String(str.getBytes("ISO-8859-1"),"utf-8" ...

  6. MySQL数据类型转换函数CAST与CONVERT的用法

    MySQL 的CAST()和CONVERT()函数可用来获取一个类型的值,并产生另一个类型的值.两者具体的语法如下: 1.CAST(value as type) 就是CAST(xxx AS 类型) 2 ...

  7. https 与 http

    HTTPS,HTTP over SSL,SSL是解决传输层安全问题的网络协议,其核心是基于公钥密码学理论实现了对服务器身份认证,数据的私密性保护以及对数据完整性的校验等功能. SSL协议在HTTP请求 ...

  8. js 循环 常用方法

    $(function () { var num = ["1","2","3","4","5",&qu ...

  9. git向码云上传代码总结

    1.下载git windows下载地址:https://git-for-windows.github.io/ 2.安装git 一路确定 3.配置git 如果你要使用ssh上传代码,你需要本地生成ssh ...

  10. java_web学习(五) JSTL标准标签库

    1.什么是JSTL JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签. ...