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

发布时间：2023-07-07 16:01:35 修改时间：2023-07-07 16:01:35 阅读：3144 评论：0 0

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

---