图片上传前后端代码（被炒鱿鱼例子）

最新推荐文章于 2023-11-27 09:00:36 发布

菜鸟小俊

最新推荐文章于 2023-11-27 09:00:36 发布

阅读量387

点赞数

本文链接：https://blog.csdn.net/yangjajun/article/details/104336677

版权

一、前端
在html中图片的src属性可以使用base64进行显示（base64html中的编码格式，编译后体积变大3/1。。。。。。。）

<body>
    <input type="file" name="" id="iamge">

</body>
<script>
    //获取上传图片节点input
    let iamge = document.getElementById('iamge')

    //用FileReader进行编译
    iamge.onchange = () => {
        let reader = new FileReader()

        reader.readAsDataURL(iamge.files[0])
        reader.onload = function () {
            console.log(this.result)
        }
    }



</script>

二、利用filereader结果发起请求传递给后端（由于数据大用post请求）

axios({
            url: "http://localhost:8080/image",
            method:'post',
            data: 编译后结果（result）
        }).then((res) => {
            console.log(res)
        })

三、后台对其进行接收处理并返回信息给前端

let express = require('express')
// let multiparty = require("multiparty")
let querystring = require('querystring')
//post请求处理插件
let bodyParser= require('body-parser');
//连接mongod数据库插件
let MongoClient = require('mongodb').MongoClient;
//数据库地址
var url = "mongodb://127.0.0.1:27017";


let app=express()

// 跨域设置
app.all('*', (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    // res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
})

//设置post传递参数大小
app.use(bodyParser.json({limit:'1000mb'}))
app.use(bodyParser.urlencoded({ extended: true,limit :"1000mb" }))

//上传接口
app.post('/image',(req,res)=>{
    let newdate = req.body
    //连接数据库
    MongoClient.connect(url,(err,db)=>{
        if(err) throw err
        let user=db.db('user')
        //写入数据
        user.collection('date').insert(newdate,(err,result)=>{
            if(err) throw err
            console.log('ok')
            res.json('ok')
        })
    })
})

//查询接口
app.post('/find',(req,res)=>{
	//连接数据库
    MongoClient.connect(url,(err,db)=>{
        if(err) throw err
        let user=db.db('user')
        //写入数据
        user.collection('date').find({}).toArray((err,result)=>{
            if(err) throw err
            console.log(result)
            res.json(result)
        })
    })
})
//创建服务
let server= app.listen('8080',()=>{
    console.log(8080)
})

四、前端请求图片请求示例（数据太大同样用post请求）

axios({
            url:"http://localhost:8080/find",
            method:'post'
        }).then((res)=>{
            console.log(res)
        })

总结：数据库非常金贵，base64过于庞大，会占用很多资源，尤其是mogod这种把数据缓冲在物理内存里的数据库。
上传图片通常是将图片保存在服务器，在数据库写入路径，或者将图片转为二进制流储存于数据库

菜鸟小俊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片上传前后端代码（被炒鱿鱼例子）

一、前端在html中图片的src属性可以使用base64进行显示（base64html中的编码格式，编译后体积变大3/1。。。。。。。）<body> <input type="file" name="" id="iamge"></body><script> //获取上传图片节点input let iamge = do...
复制链接

扫一扫