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

Mr.T's Blog

已于 2023-06-08 16:32:55 修改

阅读量2.3k

点赞数 1

文章标签： vue.js javascript 前端

于 2023-06-01 17:01:18 首次发布

本文链接：https://blog.youkuaiyun.com/qq_27751965/article/details/130992014

版权

在ElementUI的上传组件el-upload中，可以通过修改handleBeforeUpload方法将文件转换为base64格式，并在上传时将base64数据包含在上传数据中。设置auto-upload为true实现选择文件后立即上传，上传成功和失败的回调分别为handleUploadSuccess和handleUploadError。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 属性。