Element-ui手动上传base64图片

最新推荐文章于 2023-10-19 16:56:56 发布

原创最新推荐文章于 2023-10-19 16:56:56 发布 · 654 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

elementui

当前文章被收录于：

elementui

5 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何使用Vue.js实现图片上传功能，并将上传的图片转换为Base64编码字符串，通过自定义HTTP请求处理文件上传，利用FileReader API读取文件并转换为Base64格式。

<template>

<el-upload
  class="avatar-uploader"
  action="#"
  :show-file-list="false"
  :http-request="getFileMsg">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

<button @click="submit">获取图片base64串</button>
</template>
export default{

   data() {
      return {
        imageUrl: ''
      }
    },


methods: {
      submit(){
        console.log('图片base64串'+this.imageUrl);
      },
      getFileMsg(content) {
        console.log(content);

        this.getBase64(content.file).then(res => {
         
          this.imageUrl = res;
        })
      },
      // 转换base64格式
      getBase64(file) {
        return new Promise(function (resolve, reject) {
          let reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function () {
            imgResult = reader.result;
          };
          reader.onerror = function (error) {
            reject(error);
          };
          reader.onloadend = function () {
            resolve(imgResult);
          };
        });
      },


    }

}

标签

#javascript #vue