el-upload上传图片base64

`el-upload` 是 Element UI 提供的一个强大的文件上传组件，在 Vue.js 环境下使用。当涉及到图片上传时，它支持将用户选择的本地图片转换成 base64 格式。Base64 是一种编码方式，可以把图片数据转化为一串字符直接存储在 URL 或者字符串中。

在使用 `el-upload` 上传图片到服务器时，通常会配合 `on-preview` 和 `on-change` 钩子函数。这两个钩子允许你在预览文件（包括 base64 图片）和文件真正改变（比如上传成功）时执行操作。例如：

<template>
  <el-upload
    :action="uploadUrl"
    :auto-upload="false"
    :on-preview="handlePreview"
    :on-change="handleChange"
  >
    <el-button>点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'your-api-url',
      imageUrl: ''
    };
  },
  methods: {
    handlePreview(file) {
      if (file.type.match('image/*')) {
        this.imageUrl = file.url; // 获取 base64 图片
      }
    },
    handleChange(file, response) {
      if (response.status === 200) {
        // 将 base64 图片发送到服务器
        const formData = new FormData();
        formData.append('image', new Blob([this.imageUrl], { type: 'image/jpeg' }));
        axios.post('/api/upload', formData);
      }
    }
  }
};
</script>

在这个例子中，`handlePreview` 函数获取到 base64 图片，并将其保存在 `imageUrl` 中。然后在 `handleChange` 中，你可以创建一个 `Blob` 对象并将其包含在 `FormData` 中，用于发送 POST 请求到服务器。