一、前端
在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这种把数据缓冲在物理内存里的数据库。
上传图片通常是将图片保存在服务器,在数据库写入路径,或者将图片转为二进制流储存于数据库