图片存储思路和方法
方法一、 直接将图片的base64编码存在MongoDB数据库中
Base64是一种用64个字符来表示任意二进制数据的方法，常用于在URL、Cookie、网页中传输少量二进制数据。
前台
- 绑定
input的change事件 - 利用H5中的fileReader对象获取图片的base64编码
uploadPhoto(e) { var that = this; // 利用fileReader对象获取file var file = e.target.files[0]; var filesize = file.size; var filename = file.name; if (filesize > ) { // 图片大于2MB console.log("图片过大，请使用其它方式上传！"); } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { // 读取到的图片base64 数据编码 将此编码字符串传给后台即可 var imgcode = e.target.result; console.log(imgcode); }; } - 发送请求将base64编码传给后台
that.$axios .post("/api/uploadPhoto", { filename: filename, filesize: filesize, base64: imgcode }) .then(res => { console.log("图片上传成功！"); });
后台
- models/photo.js
let mongoose = require('mongoose'); var Schema = mongoose.Schema; var photoSchema = new Schema({ filename: String, filesize: Number, base64: String }) module.exports = mongoose.model('Photo', photoSchema) - routes/photo.js
var express = require('express'); var router = express.Router(); var mongoose = require('mongoose'); //引入models var Photo = require('../models/photo') //连接数据库 mongoose.connect('mongodb://127.0.0.1:27017/mongo', { useNewUrlParser: true }) mongoose.connection.on('connected', function () { console.log('连接成功'); }) mongoose.connection.on('error', function () { console.log('出错了'); }) mongoose.connection.on('disconnected', function () { console.log('连接断开'); }) router.post('/uploadPhoto', (req, res) => { var filename = req.body.filename var filesize = req.body.filesize var base64 = req.body.base64 Photo.insertMany({ filename: filename, filesize: filesize, base64: base64 }, (err, data) => { if (err) { console.log(err); } console.log('上传图片成功！'); }) }) module.exports = router;
前台如何使用base64编码？
- 只需设置
src属性为base64编码
⚠️注意：对于系统中需要上传的图片较多时并不建议采用这种方式，我们一般会选择存图片路径的方式，这样有助于减小数据库压力。
FileReader文档
方法二、 存储图片路径，云存储
七牛云
整体思路：
- 申请七牛云账号，创建对象存储空间
- 拿到发送请求需要的几项数据：
- 空间名称bucket
- SK 和 AK，个人中心➡️️密钥管理
- 储存空间的外链域名
- 后台认证：当前端请求要上传图片到七牛云的时候，向前端发送一个上传凭证的token
- 前台上传图片到七牛云
- vue+express中上传图片到七牛云
阿里云
方法三、 自行搭建静态资源服务器存储图片
- Nginx+Fastdfs搭建图片服务器
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/228588.html原文链接：https://javaforall.net
