方法一

实现图片上传的方法有很多，这里我们介绍比较简单的一种，使用base64对图片信息进行编码，然后直接将图片的base64信息存到数据库。

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

base64介绍

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。通俗点来讲，它可以将不算大的文件或图片转为字符，这样就可以将文件或图片存到数据库中了。

Vue代码：

<template>
  <div class="power">
    <input @change="uploadPhoto($event)" type="file" class="kyc-passin" />
    //使用数据库中的base64位图片
    <img :src="base64" alt />
    <!-- // 这种可以打开相机或文件，"jpg,png,gif"这种打开只能上传特定文件且没有相机 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline:{
        img:''
      },
      base64:''
      }
  },
  methods: {
    uploadPhoto(e) {
      // 利用fileReader对象获取file
      var file = e.target.files[0];
      var filesize = file.size;
      var filename = file.name;
      console.log(filename)
      // 2,621,440   2M
      if (filesize > 2101440) {
        // 图片大于2MB
      }
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e)=> {
        // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
        var imgcode = e.target.result;
        // let that=this;
        this.formInline.img = imgcode;
        console.log(111,imgcode);
      this.$http.post('/uploads/transfer',{
            "filename": filename,
            "filesize": filesize,
            "base64": imgcode
          }).then(res=>{
            this.base64=res.data.base64
        console.log(res.data)
        console.log("图片上传成功！");
      })
      }
    },


  }
};
</script>

<style scoped>
.one {
  width: 3rem;
  height: 3rem;
}
.one img {
  width: 3rem;
  height: 3rem;
}
</style>

后端

model层

imgupload.js
/*
 * @Author: your name
 * @图片数据表
 * @FilePath: /all/node-express-mongodb/model/imgupload.js
 */

const mongoose = require('mongoose')
// 链接数据库
mongoose.connect('mongodb://localhost:27018/demo', {
    useCreateIndex: true,
    useNewUrlParser: true
}, function (erro, success) {
    if (erro) {
        console.log("数据库连接失败")
    } else {
        console.log("数据库连接成功")
    }
})
// 创建表
const Imguploadchema= new mongoose.Schema({
        filename: {type:String},
        filesize: {type:Number},
        base64: {type:String}
    })

const Imgupload=mongoose.model('Imgupload', Imguploadchema)

module.exports ={Imgupload}

route层
imgupload.js

/* jshint esversion: 8 */
// 引入数据库模型
const {
    Imgupload
  } = require('../model/imgupload')
  const express = require('express');
  // 安装 jsonwebtoken依赖包 并引入
  // const jwt = require('jsonwebtoken')
  const app = express();
  const bodyParser = require('body-parser');
  app.use(bodyParser.json({
    limit: '1mb'
  }));
  app.use(bodyParser.urlencoded({
    limit: '1mb',
    extended: false
  }));
   // 跨域访问
  app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', '*');
    res.header('Access-Control-Allow-Methods', '*');
    res.header('Content-Type', 'application/json;charset=utf-8');
    res.header("Access-Control-Expose-Headers", 'Authorization');
    next();
  });
  // 加入图片
  app.post("/uploads/transfer", async function (req, res) {
      console.log(111, req.body)
      const data = {
        "filename": req.body.filename,
        "filesize": req.body.filesize,
        "base64": req.body.base64
      }
      console.log(data)
      const imgupload = await Imgupload.create(data)
      res.send(imgupload)
    }),

  // 监听端口
  app.listen(3001, () => {
    console.log('http://localhost:3001')
  })

至此就实现图片上传到数据库啦

前台如何使用base64编码？

只需设置标签的src属性为base64编码 🥰😋

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

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

七牛云 整体思路：

  1. 申请七牛云账号，创建对象存储空间
  2. 拿到发送请求需要的几项数据：
  • 空间名称bucket
  • SK 和 AK，个人中心➡️️密钥管理
  • 储存空间的外链域名
  1. 后台认证：当前端请求要上传图片到七牛云的时候，向前端发送一个上传凭证的token
  2. 前台上传图片到七牛云

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