nodejs——上传图像Upload——简单版

最新推荐文章于 2024-05-28 09:42:09 发布

S-A

最新推荐文章于 2024-05-28 09:42:09 发布

阅读量6.1k

点赞数 3

文章标签：上传照片 express

本文链接：https://blog.csdn.net/qq_43285335/article/details/83004649

版权

运用nodejs模块，需要下载nodejs(可以在菜鸟教程下载)
学习前端的我们，写一个项目之前，都先创建文件夹，我在这用的(vscode）

上传图像

1.用开发软件打开创建文件 (名字必须是英文，可以写入之后在进行修改名字，在开发过程需要用英文命名） 3在开发软件里打开终端，

[不知道可以点击查看图片](https://img-blog.csdn.net/20181010193446759?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg1MzM1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
出现下面状态：
在这里插入图片描述

3.在终端里面输入：npm init ，一直回车，生成package.json

在这里插入图片描述

4.因为我们写项目需要nodejs中的好多模块，所以需要在后端安装

1.express模块安装express ---- npm install express

在这里插入图片描述

2.multer 模块安装multer ---- npm install multer

在这里插入图片描述

5.在文件夹下面创建public文件夹-存放前端呈现页面，在public下面创建文件index.html,upload.html，在文件夹下面创建index.js 写后端

在这里插入图片描述

下面我们就开始写页面

先写主页index.html

主页内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是主页</title>
</head>
<body>
    <!-- form表单 -->
    <!-- action="" 接口名字(前后端的连接) method方法，form表单支持两种方式POST,GET 默认是GET -->
    <form action="/upload" method="POST" enctype="multipart/form-data">
        <!-- input 类型 = file 文件选择器, accept接受,属性值表示接受的类型。required表示必填，name的值是后端获取的值 -->
        <input type="file" accept="image/jpg,image/png,image/jpeg,image/gif" required name="photo">
        <!-- input 类型 = submit 表示点击按钮 -->
        <input type="submit" value="上传图像">
    </form>
    
</body>
</html>

在这里插入图片描述

呈现的结果：
在这里插入图片描述

页面可能有点丑，这里主要教给大家上传图像的过程其实呈现给人们观看的页面就这些，uoload.html我们大家也可以不需要，如果写项目，需要多个网页，那么上传这块的内容就要写入到upload.html(当然名字是自己起的）

2.写后端 index.js

1.模块

// 先导入需要的模块
var express = require('express')
// express 模块是nodejs的http框架，他封装了nodejs模块,使创建的服务器更简单方便,

var multer = require('multer')
// multer模块,nodejs中间件,用于上传图片

var bodyParser = require('body-parser')
// 如果使用POST方法，就必须导入bodyParser,body-parser请求体解析模块，是express的中间件用于接受请求体中的数据，并解析为对象，解析之后的对象会将作为body属性添加给rep对象

var web = express()
web.use(express.static('public'))
// 设置服务器静态文件夹,里面的文件都是呈现给人们看的网页
web.use(bodyParser.urlencoded({extended:false}))
// 插入中间件 ,bodyParser.urlencoded 用来解析 request 中的body中的urlencoded字符

备注截图里面，12,14行，正确是web.use里面写错的

在这里插入图片描述

2：设置上传图像

// 设置随机名字
var index =Math.floor(Math.random()*100)
var fullName = ''

// 思路
// 上传内容并储存——1.设置存储的地方——2.设置存储时的名字{1.获取原来名字的后缀，2.再重新命名}
var headerConfig = multer.diskStorage({
    // destination目的地
    destination: 'public/headers',
    // fliename 文件名 后面跟函数,函数有三个参数
    // file为当前上传的图片 
    filename: function (req, file, callback) {
        // 先获取原来图片的后缀名

        //  1.选找到图片的名字,并进行分割
        var nameArray = file.originalname.split('.')
        // 长度是从1开始的 索引是从0开始的
        // [1,2,3,4]长度4 -1 [nameArray.length - 1]索引
        var type = nameArray[nameArray.length - 1]

        // 新的名字 = 随机数组.照片类型
        var imageName = index + '.' + type;
        fullName = imageName

        // 设置回调的内容,参数1：错误信息，参数2：图片新的名字
        callback(null, imageName)

    }
})

在这里插入图片描述

3.设置上传接口

// 设置使用当前的配置信息
// 上传完照片后要使用的配置信息
var upload = multer({storage:headerConfig})

// single 上传单个文件; photo 为前端上传图像的input标签的name值
// upload.single('photo')每次上传单个照片的配置信息
web.post('/upload',upload.single('photo'),function(req,res){
    res.send('')
    console.log('上传成功')

})

在这里插入图片描述

4.写前端获取照片的接口

<script>
        var submit = document.querySelectorAll('input')[1]
        submit.addEventListener('click', function () {
            setTimeout(() => {
                window.location.href = 'http://localhost:8080'
            },10);
        })
        function getHeader() {
            var xhr = new XMLHttpRequest()
            xhr.open('get', '/getMyHeader')
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    console.log(xhr.responseText)
                    // 创建一个标签 
                    var img = document.createElement('img')
                    img.style.width = '100px'
                    img.style.height = '100px'
                    img.style.border = '1px solid black'
                    img.src = xhr.responseText
                    document.body.appendChild(img)
                }
            }
        }
        // 调用函数
        getHeader() 
    </script>

在这里插入图片描述

5.后端发送照片给页面显示

web.get('/getMyHeader',function(req,res){
    res.send('headers/'+ fullName)

})

在这里插入图片描述

最后端口号

web.listen('8080',function(){
    console.log('服务器开启..')
})

可以试试看看是不是出来效果啦

有问题的可以在下面啊问我。这个不是很完善，希望大家有更好的方式

S-A

关注

3
点赞
踩
26

收藏

觉得还不错? 一键收藏
6
评论
nodejs——上传图像Upload——简单版

运用nodejs模块，需要下载nodejs(可以在菜鸟教程下载)学习前端的我们，写一个项目之前，都先创建文件夹，我在这用的(vscode）上传图像1.用开发软件打开创建文件 (名字必须是英文，可以写入之后在进行修改名字，在开发过程需要用英文命名） 3在开发软件里打开终端，[不知道可以点击查看图片](https://img-blog.csdn.net/20181010193446759?wa...
复制链接

扫一扫