vue 图片上传转base64

最新推荐文章于 2024-07-29 14:17:59 发布

不爱吃芹菜！

最新推荐文章于 2024-07-29 14:17:59 发布

阅读量784

点赞数 1

分类专栏： js 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/a2844945185/article/details/121226384

版权

本文介绍如何在Vue.js应用中实现图片上传功能，并将其转换为Base64编码。通过使用HTML5的FileReader API，可以读取上传的图片文件，然后将它们转化为Base64字符串，方便在前端展示或发送到后端。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <el-upload
      accept=".jpg,.jpeg,.png,.JPG,.JPEG"
      action="/****/****/*****/******"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :auto-upload="false"
      :on-change="upload"
      @click="submit"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-button type="success" round @click="submit">图片上传</el-button>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      imag