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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: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 写后端

在这里插入图片描述

下面我们就开始写页面

  1. 先写主页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('服务器开启..')
})

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

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

展开阅读全文

没有更多推荐了,返回首页