avue-crud 使用base64方式上传图片

Avue-Crud 是一款基于 Vue.js 的轻量级表格与表单组件库，它提供了一个用户友好的界面用于数据操作，包括CRUD功能。在 Avue 中处理图片上传，特别是使用 base64 方式，通常会涉及到以下几个步骤：

1. **HTML部分**：在表单字段添加一个 input 元素，并设置其 type 为 "file" 和一个 `ref` 属性，以便于获取文件内容。

<template>
  <div>
    <input ref="imageInput" type="file" @change="uploadImage" />
  </div>
</template>

2. **JavaScript部分**：在上传事件 (`@change`) 中，读取文件并将其转换为 base64 格式。

<script>
export default {
  methods: {
    uploadImage(e) {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.imageBase64 = reader.result;
        };
      }
    },
  },
  data() {
    return {
      imageBase64: '',
    };
  },
}
</script>

3. **将 base64 数据发送到服务器**：当你提交表单时，将这个 base64 字符串作为图片字段传递给后端服务，通常会在提交请求的数据对象中添加一个新的键值对，比如 `{ 'image': this.imageBase64 }`。

4. **处理响应**：后端接收到 base64 数据后，需要解码并保存图片。具体的存储格式取决于你的服务器配置。