MongoDB(三)——图片存储

图片存储思路和方法

方法一、 直接将图片的base64编码存在MongoDB数据库中

Base64是一种用64个字符来表示任意二进制数据的方法，常用于在URL、Cookie、网页中传输少量二进制数据。

前台

1. 绑定input的change事件

   <input @change="uploadPhoto($event)" type="file">
   
   

2. 利用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 > 2101440) {
           // 图片大于2MB
           console.log("图片过大，请使用其它方式上传！");
         }
         var reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = function(e) {
           // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
           var imgcode = e.target.result;
           console.log(imgcode);
         };
       }
   

3. 发送请求将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编码？

• 只需设置<img>标签的src属性为base64编码

⚠️注意：对于系统中需要上传的图片较多时并不建议采用这种方式，我们一般会选择存图片路径的方式，这样有助于减小数据库压力。

FileReader文档

方法二、 存储图片路径，云存储

七牛云

整体思路：

1. 申请七牛云账号，创建对象存储空间

2. 拿到发送请求需要的几项数据：

   • 空间名称bucket
   • SK 和 AK，个人中心➡️️密钥管理
   • 储存空间的外链域名

3. 后台认证：当前端请求要上传图片到七牛云的时候，向前端发送一个上传凭证的token

4. 前台上传图片到七牛云

• vue+express中上传图片到七牛云

阿里云

方法三、 自行搭建静态资源服务器存储图片

• Nginx+Fastdfs搭建图片服务器