vue中上传图片到mongodb数据库

最新推荐文章于 2024-04-16 11:12:33 发布

Amnesia�

最新推荐文章于 2024-04-16 11:12:33 发布

阅读量1.3k

点赞数 1

文章标签：数据库 vue mongodb

本文链接：https://blog.csdn.net/qq_44242030/article/details/104946601

版权

本文介绍了两种在Vue应用中上传图片到MongoDB数据库的方法：一是通过Base64编码直接存储，二是存储图片路径配合云存储（如七牛云）。Base64编码适用于小文件，但会增加数据库负担；而云存储可以减轻数据库压力，适合大量图片存储。文中详细阐述了前后端实现这两种方法的步骤。

摘要由CSDN通过智能技术生成

方法一

实现图片上传的方法有很多，这里我们介绍比较简单的一种，使用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

最低0.47元/天解锁文章