如何在Nuxt.js中使用Dropzone将上传图片转为Base64存入数据库

以下是修改后可直接实现转 Base64 逻辑的完整代码：

<template>
  <div id="app">
    <!-- 增加ref绑定和文件添加事件监听 -->
    <vue-dropzone 
      ref="dropzone"
      id="drop1" 
      :options="dropOptions"
      @vdropzone-added-file="handleFileAdded"
      @vdropzone-removed-file="handleFileRemoved"
    ></vue-dropzone>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";
import "vue2-dropzone/dist/vue2Dropzone.min.css"

export default {
  data: () => ({
    // 用于存储转码后的Base64字符串，单文件可改为字符串类型
    uploadBase64List: [],
    dropOptions: {
      // 关闭自动上传，无需直接提交到指定url，自行处理Base64逻辑
      autoProcessQueue: false,
      // 原有配置保留
      url: "https://httpbin.org/post",
      maxFilesize: 2, // MB
      maxFiles: 4,
      chunking: true,
      chunkSize: 500, // bytes
      thumbnailWidth: 150, // px
      thumbnailHeight: 150,
      addRemoveLinks: true
    }
  }),
  components: {
    vueDropzone
  },
  methods: {
    removeAllFiles() {
      this.$refs.dropzone.removeAllFiles();
      this.uploadBase64List = [];
    },
    // 文件添加后自动转Base64
    handleFileAdded(file) {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        // 读取完成后拿到Base64字符串
        const base64Str = reader.result
        // 存入本地变量，后续提交接口时传给后端存入数据库即可
        this.uploadBase64List.push(base64Str)
      }
      reader.onerror = (error) => {
        console.error('文件转Base64失败', error)
      }
    },
    // 同步删除本地存储的Base64数据
    handleFileRemoved(file) {
      const index = this.$refs.dropzone.files.indexOf(file)
      if (index > -1) {
        this.uploadBase64List.splice(index, 1)
      }
    }
  }
};
</script>

关键实现说明 #

• 关闭默认自动上传：在dropOptions中新增autoProcessQueue: false，避免文件添加后自动向配置的url发起上传请求
• 事件绑定：通过vdropzone-added-file事件监听用户添加的文件，每新增一个文件就触发一次转码逻辑
• Base64转码：使用浏览器原生FileReader接口的readAsDataURL方法直接将文件对象转为Base64格式，转码完成后存入本地变量，后续提交表单时和其他参数一起传给后端存入数据库即可

注意事项 #

• Base64格式的图片体积比原文件大33%左右，仅推荐小体积图标/头像使用该方案，大体积图片建议上传到对象存储服务后将访问地址存入数据库
• 可根据业务需求自行调整uploadBase64List的存储格式，单文件上传直接定义为字符串类型即可

内容的提问来源于stack exchange，提问作者Jonh wick