vue实现图片上传功能

最新推荐文章于 2024-10-27 16:00:56 发布

原创最新推荐文章于 2024-10-27 16:00:56 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种通过FileReader API读取用户上传的图片文件，并将其转换为Base64编码的方法。这种方法适用于网页应用中图片的预览和上传功能，通过直接读取文件并转换为Base64，可以方便地将图片数据发送给服务器。

1、通过new FileReader方式

html布局：

<div class='dialog-img-input'>
              <input type="file" id="dialogLogoImgId" name="pic" @change="uploadImg(this)" /> <br/>
</div> //设置透明度为0
<div class='dialog-img-button'>
              <el-button>重新上传</el-button>
</div>

方法一：

let imgFiles = document.getElementById('dialogLogoImgId').files //获取文件列表
let reader = new FileReader()
reader.readAsDataURL(imgFiles[0]) //只有一张图片，如果多张图片需要进行遍历
reader.onload = function (ev) {
 _this.dialogoImgUrl = this.result  //this.result是文件的base64地址地址
      }