vue实现图片上传功能

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

摸鱼搬砖工

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

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/csdn_zhuang/article/details/102590378

版权

vue 专栏收录该内容

13 篇文章

订阅专栏

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地址地址
      }