Mackit 신제품

Mackit — macOS 개발자 캐시 클리너:Xcode / Node / Flutter 등이 남긴 재생성 가능한 캐시를 스캔하고 항목별 위험을 표시해 디스크 공간을 되찾으세요

자세히 보기
안내 2024년 6월부터 개발자 게시판의 새 글 업데이트를 중단했습니다. 방문해 주셔서 감사합니다. 아카이브 글
前端

uniapp、vue、小程序、js图片转base64 示例代码

一般来说uniapp就是用的JS, 所以可以使用JavaScript将图片转换为base64编码。Base64编码是一种将二进制数据转换为可见字符的编码方式,可以将图片以文本方式存储或传输。下面是一个示例代码,演示如何在uniapp中使用Vue.js和JavaScript将图片转换为base64编码:

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="convertToBase64">转换为Base64</button>
    <img :src="imageUrl" alt="转换后的图片" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: '',
      file: null
    };
  },
  methods: {
    handleFileChange(e) {
      this.file = e.target.files[0];
    },
    convertToBase64() {
      if (this.file) {
        const reader = new FileReader();
        reader.readAsDataURL(this.file);
        reader.onload = (e) => {
          this.imageUrl = e.target.result;
        };
      }
    }
  }
};
</script>