el-upload 组件取文件后base64格式直接上传

element-ui el-upload 组件取文件后直接上传并且上传base64格式

在 Element UI 的 el-upload 组件中，默认行为是在选择文件后立即上传文件。如果直接将文件以 base64 格式上传，你可以修改示例代码中的 handleBeforeUpload 方法，将文件转换为 base64 格式后直接进行上传。

<template>
  <el-upload
    class="upload-demo"
    action="/your-upload-endpoint"
    :on-success="handleUploadSuccess"
    :on-error="handleUploadError"
    :auto-upload="true"
    :data="uploadData"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadData: {} // 上传数据
    };
  },
  methods: {
    handleUploadSuccess(response, file, fileList) {
      // 文件上传成功的处理
      console.log(response);
    },
    handleUploadError(error, file, fileList) {
      // 文件上传失败的处理
      console.error(error);
    },
    handleBeforeUpload(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          // 将 base64 数据保存到上传数据中
          this.uploadData.base64 = reader.result;
          resolve(file);
        };
        reader.onerror = (error) => reject(error);
      });
    }
  }
};
</script>

在上述示例中，将 auto-upload 属性设置为 true，以便在选择文件后立即进行上传。同时，我们将 base64 数据保存到 uploadData 对象中，并将其作为上传数据传递给 el-upload 组件的 data 属性。